css学习10：渐变和高级选择器

最新推荐文章于 2023-11-08 17:40:37 发布

D_evin_

最新推荐文章于 2023-11-08 17:40:37 发布

阅读量308

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/D_evin_/article/details/120296048

版权

十九、渐变

1. 线性渐变

(1) 颜色和角度

- `background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色，才能体现出颜色的变化

- `linear-gradient()`渐变颜色的参数用逗号分开，可以写多种颜色表达方式

- 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向

- `90deg` 角度

- to 终点关键词，就是终点在哪个位置，top，left，right，bottom，记得加空格（不建议使用）

【练习】

> 使用七种颜色作出彩虹渐变效果

> 颜色可以使用任何表示色值的方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .d1{
            width: 300px;
            height: 200px;
            border: 2px solid black;
            /* 渐变属性 */
            background-image:linear-gradient(red,rgb(246,185,34),green,rgb(83,251,239),
            blue,rgb(53,0,214),rgb(106,0,122)) ;
        }
    </style>
</head>
<body>
</body>
    <div class="d1"></div>
</html>

【练习】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .nav{
            background-color:rgba(160, 146, 146, 0.7);
        }
        .center{
            width: 1000px;
            margin:auto;
        }
        .nav ul{
            list-style: none;
            height: 40px;
        }
        .nav ul >li{
            width: 200px;
            float: left;
            text-align: center;
            line-height: 40px;
            position: relative;
            background-image: linear-gradient(90deg,#4cc9f4,#5362b4);
        }
        .nav ul li a{
            text

最低0.47元/天解锁文章

D_evin_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css学习10：渐变和高级选择器

渐变和高级选择器十九、渐变1. 线性渐变(1) 颜色和角度- `background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色，才能体现出颜色的变化- `linear-gradient()`渐变颜色的参数用逗号分开，可以写多种颜色表达方式- 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向- `90deg` 角度- to 终点关键词，就是终点在哪个位置，top，left，right...
复制链接

扫一扫