联想企业网站建设的思路/南宁网站优化公司电话
CSS3 特性
1.1 图片模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();
例如： filter: blur(5px); blur模糊处理 数值越大越模糊
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片模糊处理filter</title><style>img {width: 300px;/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */filter: blur(8px);}img:hover {filter: blur(0);}</style></head><body><img src="images/0.jpg" alt=""></body>
</html>效果图：
1.2 计算盒子宽度 width: calc 函数
CSS3 calc 函数:
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3属性calc函数</title><style>.father {width: 300px;height: 200px;background-color: orangered;}.son {/* width: 150px; *//* width: calc(150px + 30px); */width: calc(100% - 30px);height: 30px;background-color: skyblue;}</style></head><body><!-- 需求我们的子盒子宽度永远比父盒子小30像素 --><div class="father"><div class="son"></div></div></body>
</html>1. 过渡 transition
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s
- 运动曲线： 默认是 ease （可以省略）
- 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
注意：谁做过渡给谁加
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3 过渡效果</title><style>div {width: 200px;height: 100px;background-color: greenyellow;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* transition: width .5s ease 0s, height .5s ease 1s; *//* 如果想要写多个属性，利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 谁做过渡，给谁加 *//* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */transition: all 0.5s;/* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */}div:hover {width: 400px;height: 200px;background-color: skyblue;}</style></head><body><div></div></body>
</html>效果图：
1.1 进度条案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3过渡练习-进度条</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 谁做过渡给谁加 */transition: all .7s;}.bar:hover .bar_in {width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>
效果图：
1.2 仿小米logo
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.header-logo {position: relative;}/* 设置a标签的样式 */.logo {display: block;width: 55px;height: 55px;overflow: hidden;background-color: #ff6700;text-align: left;text-indent: -9999em;}/* mi logo的样式 */.logo::before {/* 定位 */position: absolute;/* 伪元素必须要设置content属性 */content: '';/* 左偏移 */left: 0;/* 上偏移 */top: 0;width: 55px;height: 55px;/* 设置过渡 */transition: all .3s;/* 背景图片 */background: url(./images/mi-logo.png) no-repeat center center;/* 透明度 */opacity: 1;}/* mi home 的样式 */.logo::after {position: absolute;content: '';left: 0;top: 0;width: 55px;height: 55px;transition: all .3s;background: url(./images/mi-home.png) no-repeat center center;margin-left: -55px;opacity: 0;}/* 鼠标移入 让mi logo 往右侧进行滑动 */.logo:hover::before {opacity: 0;margin-left: 55px;}/* 鼠标移入 让mi home 回到盒子中间 */.logo:hover::after {opacity: 1;margin-left: 0;}</style></head><body><div class="header-logo"><a href="" class="logo" title="小米官网">小米官网</a></div></body></html>效果图：
2. 2D变形 transform
2.1 移动 translate(x, y)
translate 移动平移的意思
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）translateX(x)仅水平方向移动（X轴移动）translateY(Y)仅垂直方向移动（Y轴移动）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 100px;height: 100px;background-color: orangered;transition: all 0.5s;}/*a:active 鼠标没点击没有松开鼠标的时候触发的状态 相当于点击*/div:active {/*transform: translate(50px, 50px); 当我们点击之后再移动位置*//*transform: translate(50px); 当我们点击之后再移动位置 x轴*//*transform: translate(0, 50px); 当我们点击之后再移动位置 y轴*/transform: translateX(100px);/* transform: translateY(100px); 只跟一个参数就是 Y */}</style></head><body><div></div></body>
</html>
让定位的盒子水平居中
div {position: absolute;width: 200px;height: 200px;background-color: orangered;/*transform: translate(100px) 水平移动100像素*//* 如果移动的距离是% 不是以父级宽度为准，以自己宽度为准 意思就是让div盒子 自己宽度200 的一半 走 100像素 *//*transform: translate(50%) *//*已让我们让定位的盒子居中对齐*/left: 50%;/*以父级宽度为准*/top: 50%;/*margin-left: -100px; 需要计算不合适*/transform: translate(-50%, -50%);
}
2.2 缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（如果只写一个参数， 宽度和高度都缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
图片缩放
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>section {width: 632px;height: 340px;margin: 0 auto;overflow: hidden;/*溢出隐藏*/border: 2px solid red;}/*实际图片做动画 所以过渡要给img 做动画 谁做动画，谁加过渡*/section img {transition: all 0.2s}/*鼠标经过section 的时候 里面的img做 缩放*/section:hover img {transform: scale(1.2);}</style></head><body><section><img src="images/mi.jpg" alt="" /></section></body>
</html>
2.3 旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>img {width: 200px;margin: 100px;transition: all .8s;border-radius: 50%;/* 圆角*/border: 5px solid #FF1493;}img:hover {/*transform: rotate(-90deg); deg 度数*/transform: rotate(360deg);/* deg 度数*/}</style></head><body><img src="images/0.jpg" alt="" /></body>
</html>
2.3.1 调整元素转换变形的原点 transform-origin
transform-origin: center center; /* 默认 */
/* 改变元素原点到左上角，然后进行顺时旋转45度 */
div{transform-origin: left top;transform: rotate(45deg);
}
如果是4个角的图形，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
/* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
div{transform-origin: 10px 10px;transform: rotate(45deg);
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>img {margin: 200px;transition: all 0.7s;transform-origin: 20px 30px;}img:hover {transform: rotate(45deg);/* deg 度数*/}</style></head><body><img src="images/pk1.png" width="200" alt="" /></body>
</html>
旋转的图片
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {position: relative;width: 200px;height: 150px;border: 1px solid orangered;margin: 400px auto;}div img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all 0.6s;transform-origin: top right;}/*鼠标经过div 第一张图片旋转*/div:hover img:nth-child(1) {transform: rotate(60deg);}div:hover img:nth-child(2) {transform: rotate(120deg);}div:hover img:nth-child(3) {transform: rotate(180deg);}div:hover img:nth-child(4) {transform: rotate(240deg);}div:hover img:nth-child(5) {transform: rotate(300deg);}div:hover img:nth-child(6) {transform: rotate(360deg);}</style></head><body><div><img src="images/6.jpg" alt="" /><img src="images/5.jpg" alt="" /><img src="images/4.jpg" alt="" /><img src="images/3.jpg" alt="" /><img src="images/2.jpg" alt="" /><img src="images/1.jpg" alt="" /></div></body>
</html>
2.4 倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>section {width: 800px;}div {float: left;width: 200px;height: 100px;background-color: orangered;margin: 50px;}div:nth-child(1) {/* transform: skew(10deg); */transform: skewX(10deg);}div:nth-child(2) {/* transform: skew(-10deg); */transform: skewX(-10deg);}div:nth-child(3) {/* transform: skew(0,10deg); */transform: skewY(10deg);}div:nth-child(4) {/* transform: skew(0,-10deg); */transform: skewY(-10deg);}</style></head><body><section><div>skewX(10deg)</div><div>skewX(-10deg)</div><div>skewY(10deg)</div><div>skewY(-10deg)</div></section></body>
</html>
3. 3D变形 transform
-
x 左边是负的，右边是正的
-
y 上面是负的，下面是正的
-
z 里面是负的，外面是正的
3.1 rotate XYZ
- rotateX() 就是沿着 x 立体旋转
- rotateY() 就是沿着 Y 轴进行旋转
- rotateZ() 就是沿着 Z 轴进行旋转
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {perspective: 1000px;/*视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显*/}div {display: inline-block;margin: 100px 50px;}img {width: 300px;height: 200px;transition: all 3s;}div:nth-child(1) img:hover {transform: rotateX(360deg);}div:nth-child(2) img:hover {transform: rotateY(360deg);}div:nth-child(3) img:hover {transform: rotateZ(360deg);}</style></head><body><div><h4>X轴旋转</h4><img src="images/1.jpg" alt="" /></div><div><h4>Y轴旋转</h4><img src="images/2.jpg" alt="" /></div><div><h4>Z轴旋转</h4><img src="images/3.jpg" alt="" /></div></body>
</html>效果图：
3.2 透视(perspective)
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
3.3 translate XYZ
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。
比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {perspective: 600px;}div {width: 200px;height: 200px;background-color: orangered;margin: 100px auto;transition: all 1s;}div:hover {/*透视是眼睛到屏幕的距离 透视只是一种展示形式 是有3d效果的意思*//*translateZ是物体到屏幕的距离 Z是来控制物体近大远小的具体情况*//*translateZ 越大，我们看到的物体越近，物体越大*/transform: translateZ(100px);}</style></head><body><div></div></body>
</html>
translate3d(x,y,z)
x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；但是z只能设置长度值
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {perspective: 600px;}div {width: 200px;height: 200px;background-color: orangered;margin: 100px auto;transition: all 1s;}div:hover {/*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 % 但是z 只能是px*/transform: translate3d(100px, 100px, 100px);}h2 {transform: translate3d(0, 50px, 0);transition: all 0.8s;}h2:hover {transform: translate3d(0, 0, 0);}</style></head><body><div></div><h2>每一毫米的突破</h2></body>
</html>
案例：开门
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>section {position: relative;width: 450px;height: 300px;border: 1px solid #000;margin: 100px auto;background: url(images/01.jpg) no-repeat;/*给父盒子添加透视效果*/perspective: 1000px;}.door-l,.door-r {position: absolute;top: 0;width: 50%;height: 100%;background-color: deepskyblue;/*两个门都做过渡效果*/transition: all 1s;/* background: url(images/bg.png); */}.door-l {left: 0;border-right: 1px solid #000;/* 左侧盒子按照左边翻转*/transform-origin: left;}.door-r {right: 0;border-left: 1px solid #000;/* 右侧盒子按照右边翻转*/transform-origin: right;}.door-l::before,.door-r::before {/*伪元素 就是插入一个元素标签*/content: '';position: absolute;top: 50%;width: 20px;height: 20px;border: 3px solid #d10000;/*圆角*/border-radius: 50%;/*translate 如果是百分比， 就是走自己高度的一半*/transform：translateY(-50%);}.door-l::before {right: 5px;}.door-r::before {left: 5px;}/*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/section:hover .door-l {/*因为往左边翻转，所以是负值*/transform: rotateY(-130deg);}section:hover .door-r {transform: rotateY(130deg);}</style></head><body><section><div class="door-l"></div><div class="door-r"></div></section></body>
</html>效果图：
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见
案例：翻转盒子
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {position: relative;width: 224px;height: 224px;margin: 100px auto;}div img {position: absolute;top: 0;left: 0;width: 200px;height: 200px;border-radius: 50%;transition: all 1s;}div img:first-child {z-index: 1;backface-visibility: hidden;/*不是正面对向屏幕，就隐藏*/}div:hover img {transform: rotateY(180deg);}</style></head><body><div><img src="images/1.jpg" alt="" /><img src="images/0.jpg" alt="" /></div></body>
</html>
效果图：
4. 动画 animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
@keyframes 动画名称 {from{ 开始位置 } 0%to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 100px;height: 100px;background-color: orangered;/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*//*动画名称是自己定义的 go google*//*infinite 无限循环*//*一般情况下，我们就用前2个 animation: go 2s*/animation: go 3s ease 0s infinite alternate;/*引用动画*/}/* @keyframes 动画名称 */@keyframes go {from {transform: translateX(0)}to {transform: translateX(600px)}}</style></head><body><div></div></body>
</html>
多组动画
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 100px;height: 100px;background-color: orangered;/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/animation: go 5s infinite;}/*@keyframes go {} 定义动画*/@keyframes go {0% {/*起始位置，等价于 form*/transform: translate3d(0, 0, 0);}25% {transform: translate3d(800px, 0, 0);}50% {transform: translate3d(800px, 400px, 0);}75% {transform: translate3d(0, 400px, 0);}/*100% 相当于结束位置 to*/100% {transform: translate3d(0, 0, 0);}}</style></head><body><div></div></body>
</html>
案例：小汽车
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>img {margin: 100px 50px;/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/animation: car 5s infinite;}/*定义动画*/@keyframes car {0% {transform: translate3d(0, 0, 0);}50% {transform: translate3d(1000px, 0, 0);}51% {transform: translate3d(1000px, 0, 0) rotateY(180deg);/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/}100% {transform: translate3d(0, 0, 0) rotateY(180deg);/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/}}</style></head><body><img src="images/car.jpg" width="100" alt="" /></body>
</html>
案例：无缝滚动效果
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}nav {width: 600px;height: 100px;border: 1px solid orangered;margin: 100px auto;overflow: hidden;}nav ul {width: 200%;/*linear 匀速动画*/animation: moving 5s linear infinite;}nav ul li {float: left;}nav ul li img {width: 200px;height: 100px;}/*定义动画*/@keyframes moving {form {transform: translateX(0);}to {transform: translateX(-50%);}}/*鼠标经过nav 里面的ul 就暂停动画*/nav:hover ul {animation-play-state: paused;/*鼠标经过暂停动画*/}</style></head><body><nav><ul><li><img src="images/0.jpg" alt="" /></li><li><img src="images/1.jpg" alt="" /></li><li><img src="images/3.jpg" alt="" /></li><li><img src="images/0.jpg" alt="" /></li><li><img src="images/1.jpg" alt="" /></li><li><img src="images/3.jpg" alt="" /></li></ul></nav></body>
</html>
效果图：
5. 背景渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。
background:-浏览器前缀-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-浏览器前缀-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
1. 线性渐变（向下/向上/向左/向右/对角线）
如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
1. 线性渐变 - 从上到下（默认）
#grad {background-image: linear-gradient(red, yellow);
}
2. 线性渐变 - 从左到右
#grad {background-image: linear-gradient(to right, red , yellow);
}
3. 线性渐变 - 对角线
您可以通过指定水平和垂直起始位置来实现对角渐变
#grad {background-image: linear-gradient(to bottom right, red, yellow);
}
4. 使用角度
如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。
值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。
background-image: linear-gradient(angle, color-stop1, color-stop2);
<!DOCTYPE html>
<html><head><style>h1 {text-align: center;}div {width: 400px;margin: 0 auto;}#grad1 {height: 100px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: linear-gradient(0deg, red, yellow);}#grad2 {height: 100px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: linear-gradient(90deg, red, yellow);}#grad3 {height: 100px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: linear-gradient(180deg, red, yellow);}#grad4 {height: 100px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: linear-gradient(-90deg, red, yellow);}</style></head><body><h1>线性渐变 - 使用不同的角度</h1><div id="grad1" style="text-align:center;">0deg</div><br><div id="grad2" style="text-align:center;">90deg</div><br><div id="grad3" style="text-align:center;">180deg</div><br><div id="grad4" style="text-align:center;">-90deg</div></body>
</html>
5. 使用多个色标
<!DOCTYPE html>
<html><head><style>#grad1 {height: 55px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);}</style></head><body><div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">彩虹背景</div></body>
</html>
6. 使用透明度
如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
7. 重复线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
<!DOCTYPE html>
<html><head><style>h1,p {text-align: center;}div {width: 400px;margin: 0 auto;}#grad1 {height: 200px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}#grad2 {height: 200px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);}#grad3 {height: 200px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: repeating-linear-gradient(190deg, red, yellow 7%, green 10%);}#grad4 {height: 200px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);}</style></head><body><h1>重复线性渐变</h1><div id="grad1"></div><p>在 45deg 轴上重复的渐变，从红色开始到绿色结束：</p><div id="grad2"></div><p>在 190deg 轴上重复的渐变，从红色开始到绿色结束：</p><div id="grad3"></div><p>在 90deg 轴上重复的渐变，从红色开始到绿色结束：</p><div id="grad4"></div></body>
</html>
2. 径向渐变（由其中心定义）
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地，shape 为椭圆形，size 为最远角，position 为中心。
#grad {background-image: radial-gradient(circle, red, yellow, green);
}
不同的 size 关键字
<!DOCTYPE html>
<html><head><style>#grad1 {height: 150px;width: 150px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);}#grad2 {height: 150px;width: 150px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);}#grad3 {height: 150px;width: 150px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);}#grad4 {height: 150px;width: 150px;background-color: red;/* 针对不支持渐变的浏览器 */background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);}</style></head><body><h1>径向渐变 - 不同的 size 关键字</h1><h2>closest-side:</h2><div id="grad1"></div><h2>farthest-side:</h2><div id="grad2"></div><h2>closest-corner:</h2><div id="grad3"></div><h2>farthest-corner (默认):</h2><div id="grad4"></div></body>
</html>
重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
#grad {background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}