背景颜色渐变 background

最新推荐文章于 2024-09-23 11:27:56 发布

MDR_0820

最新推荐文章于 2024-09-23 11:27:56 发布

阅读量993

点赞数 1

文章标签： html5 css html css3 移动开发

本文链接：https://blog.csdn.net/MDR_0820/article/details/120668689

版权

本文介绍了如何使用CSS3的`-webkit-linear-gradient`属性创建背景颜色渐变，包括设置起始方向、处理兼容性问题以及不同角度的渐变效果。通过实例展示了从左到右、默认方向和指定角度的渐变代码。

摘要由CSDN通过智能技术生成

背景颜色渐变 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);
在这里插入图片描述