8.背景颜色渐变

最新推荐文章于 2025-05-18 12:21:56 发布

吃不到的花生仁

最新推荐文章于 2025-05-18 12:21:56 发布

阅读量1.5k

点赞数

分类专栏： css

css 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了现行渐变中颜色沿直线过渡的情况，包括从左到右等多种方向。还给出了CSS线性渐变的代码示例，如使用不同浏览器私有前缀实现从顶到底的颜色渐变，以及设置多个颜色位置的渐变，展示了标准语法和各浏览器的兼容写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.现行渐变中，颜色沿着一条直线过渡，从左到右、从右到左、从顶到底从底到顶，或延任意轴线

a、background:-webkit-linear-gradient(渐变起始位置，启示颜色，结果颜色)

div{
               width: 100px;
               height: 100px;
               /* background: -webkit-linear-gradient(渐变的开始位置,起始颜色,结束颜色); 背景渐变兼容性很差所以添加上浏览器私有前缀*/
               background: -webkit-linear-gradient(top,yellow,blue); /* Safari 5.1-6.0 */
           background: -o-linear-gradient(top,yellow,blue); /* Opera 11.1-12.0 */
           background: -moz-linear-gradient(top,yellow,blue); /* Firefox 3.6-15 */
           background: linear-gradient(top,yellow,blue); /* 标准语法 */
           }

div{
               width: 100px;
               height: 100px;
               /* background: -webkit-linear-gradient(渐变的起始位置，颜色，位置，颜色位置); 背景渐变兼容性很差所以添加上浏览器私有前缀*/
               background: -webkit-linear-gradient(top,red 0%,blue 20%,red 80%); /* Safari 5.1-6.0 */
           background: -o-linear-gradient(top,red 0%,blue 20%,red 80%); /* Opera 11.1-12.0 */
           background: -moz-linear-gradient(top,red 0%,blue 20%,red 80%); /* Firefox 3.6-15 */
           background: linear-gradient(top,red 0%,blue 20%,red 80%); /* 标准语法 */
           }