CSS3-渐变

来源：互联网发布：淘宝十月份有什么活动编辑：程序博客网时间：2024/05/17 22:58

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>

at center 可以改成 left 、right、top、bottom

阅读全文

0 0