CSS系列之如何用CSS渲染渐变效果

最新推荐文章于 2024-01-15 15:51:35 发布

DOGIOOH

最新推荐文章于 2024-01-15 15:51:35 发布

阅读量627

点赞数

分类专栏： CSS 文章标签： JavaWeb

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/92851651

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS系列之如何用CSS渲染渐变效果

01 CSS3渐变

线性渐变：颜色沿着一条直线过渡：从左到右/从右到左/从上到下等
径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

02 浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	12.1+	5.1+

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-

03 语法

语法示例1

linear-gradient(position(渐变方向),color1(第一种颜色),color2(第二种颜色),...)

语法示例2

兼容Webkit内核的浏览器

-webkit-linear-gradient(position,color1,color2,...)

04 程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            
            height: 1000px;
            background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>



</body>
</html>

运行结果

DOGIOOH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS系列之如何用CSS渲染渐变效果

CSS系列之如何用CSS渲染渐变效果01 CSS3渐变线性渐变：颜色沿着一条直线过渡：从左到右/从右到左/从上到下等径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合02 浏览器兼容性属性名IEFirefoxChromeOperaSafariGradient10+19.0+26.0+12.1+5.1+I...
复制链接

扫一扫

专栏目录