css渐变色

最新推荐文章于 2024-06-20 11:21:40 发布

天冷该穿秋裤啦

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量80

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_43578202/article/details/119420375

版权

本文介绍了CSS3中两种渐变方式——线性渐变与径向渐变的使用方法。通过实例代码展示了不同方向、颜色停靠点以及角度设置的渐变效果，并探讨了如何创建更复杂的渐变图案。同时，提供了多个实际的CSS渐变背景示例，帮助读者深入理解并掌握这一技术。

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

background: radial-gradient(circle, red, yellow, green, black);/*标准写法*/

css3 定义了渐变色的两个方法: 线性渐变与径向渐变

1.线性渐变

background: linear-gradient(#00a1d6, #fc7299);

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .demo{
            width: 500px;
            height: 500px;
            background: -moz-linear-gradient(#00a1d6, #fc7299);/* Firefox 3.6 - 15 */
            background: -o-linear-gradient(#00a1d6, #fc7299);/* Opera 11.1 - 12.0 */
            background: -webkit-linear-gradient(#00a1d6, #fc7299);/* Safari 5.1 - 6.0 */
            background: linear-gradient(#00a1d6, #fc7299);/*标准写法*/
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

方向默认为自上而下,你也可以设置不同的方向,比如向右 :

background: linear-gradient(to right, #00a1d6, #fc7299);

附上效果图:

除此之外还可以用百分比和角度来渐变

background: linear-gradient(135deg, blue 20%, white 50%, red 80%);

效果有点差,图我就不放了.

等等,我想到一个比较酷的主意

background-image: linear-gradient(to right, blue 33%, white 33%, white 66%, red 66%);

emmm,乳髪不能停,还不错儿,继续...

2.径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

shape为设置形状,可以设置circle 或 ellipse,circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

示例:

background: radial-gradient(red, yellow, green, black);

第一次写blog,有点生疏

天冷该穿秋裤啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css渐变色

background: radial-gradient(circle, red, yellow, green, black);/*标准写法*/css3定义了渐变色的两个方法:线性渐变与径向渐变1.线性渐变background:linear-gradient(#00a1d6,#fc7299);完整代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫