首页 > 其他分享> > 背景颜色渐变 background

背景颜色渐变 background

2021-10-09 13:01:08 作者：互联网

背景颜色渐变 background

background: -webkit-linear-gradient(起始方向，颜色1 ，颜色2，…）
background: -webkit-linear-gradient(left,pink,skyblue);
兼容问题背景渐变必须要添加浏览器私有前缀-webkit
起始方向可以是方位名词或者是度数也可以省略默认是top 从上往下渐变

    <style>
        div{
            width: 800px;
            height: 200px;
            /* 兼容性问题 必须要加浏览器私有前缀 -webkit; */
            /* background: -webkit-linear-gradient(left,pink,skyblue); */
            /* background: -webkit-linear-gradient(50deg,pink,skyblue); */
            /* 省略默认从上往下渐变 */
            background: -webkit-linear-gradient(pink,skyblue);
        }
    </style>
</head>
<body>
    <div></div>

省略默认从上往下渐变
background: -webkit-linear-gradient(pink,skyblue);
在这里插入图片描述

从左到右
background: -webkit-linear-gradient(left,pink,skyblue);
在这里插入图片描述

50度显示效果
background: -webkit-linear-gradient(50deg,pink,skyblue);

在这里插入图片描述

标签：pink,skyblue,颜色,linear,gradient,渐变,background,webkit
来源： https://blog.csdn.net/MDR_0820/article/details/120668689