CSS3-渐变

最新推荐文章于 2024-09-05 09:05:53 发布

net_chengsheng

最新推荐文章于 2024-09-05 09:05:53 发布

阅读量868

点赞数

分类专栏： css3 文章标签： css3 渐变

本文链接：https://blog.csdn.net/qq_29548433/article/details/74977871

版权

css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 渐变介绍

渐变是作用在当前元素的背景色上面的

2. 线性渐变

linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果

2.1 使用

需要配置background: linear-gradient(渐变方向, 起始颜色，中止颜色)

只能是配置background使用，在background-color上无效

渐变方向：

① to left, to right, to top, to bottom

② 也可以是角度, 0deg, 90deg, 180deg, 270deg, 相当于始终的起点到终点

示例代码1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .div1 {
            width: 200px;
            height: 100px;
            /*
                linear-gradient是用在background属性上的，不能用在background-color上
                linear-gradient有三个参数
                分别是角度、起始颜色，结束颜色
                角度值,可以是方向也可以是角度
                    to left  相当于 270deg,
                    to right 相当于 90deg,
                    to top   相当于 0deg,
                    to bottom相当于 180deg,是默认值，不写就是该值
            */
            background: linear-gradient( 90deg,green, pink );
        }
    </style>
</head>
<body>
    <!--创建一个div-->
    <div class="div1"></div>
</body>
</html>

运行结果

这里写图片描述

颜色渐变，可以设置分段渐变，以百分比的形式设置

示例代码2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .div1 {
            width: 200px;
            height: 100px;
            background: linear-gradient( 135deg, black 0%, red 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75% );
        }
    </style>
</head>
<body>
    <!--创建一个div-->
    <div class="div1"></div>
</body>
</html>

运行结果

这里写图片描述

3. 径向渐变

径向渐变是指从一个中心点开始沿着四周产生渐变效果

通过设置background:radial-gradient(中心点及渐变半径，起始颜色，终止颜色);

示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            /*设置圆角边框*/
            border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/
            background: radial-gradient( 100px at center, /*at center 是默认值，默认在中心位置，不写就是默认值*/ white, black );
        }
    </style>
</head>
<body>
    <!--创建一个div-->
    <div class="div1"></div>
</body>
</html>

运行效果

这里写图片描述

示例代码2 可以实现同上图一样的效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            /*设置圆角边框*/
            border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/
            background: radial-gradient( 100px 100px at center, /*两个参数表示，横向100px,纵向100px*/ white, black );
        }
    </style>
</head>
<body>
    <!--创建一个div-->
    <div class="div1"></div>
</body>
</html>

示例代码3 效果同上

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            /*设置圆角边框*/
            border-radius: 50%; /*50%表示，边框圆角为宽度和高度的一半*/
            background: radial-gradient( 50% 50% at center, /*两个参数表示，横向100px,纵向100px*/ white, black );
        }
    </style>
</head>
<body>
    <!--创建一个div-->
    <div class="div1"></div>
</body>
</html>