CSS3渐变——gradient

时间 2019-11-19

标签 css3 css 渐变 gradient 栏目 CSS 繁體版

原文原文链接

　　渐变是CSS3中的一个新加特性，能够让颜色之间平稳过渡，让页面样式更为炫酷html

　　书写渐变属性时，注意添加前缀（不一样浏览器的兼容性不一样）web

线性渐变liner-gradient

　　沿着一根隐形的轴线，从起点到终点实现颜色的顺序渐变chrome

　　默认从上到下，也可左右/对角线渐变，不一样的浏览器设置的方法也略有区别（见下图）浏览器

　　主要区别在：chrome设置起始位置，而其余的（包括通用方法）都设置结束位置ide

角度

　　以y轴的正方向为0deg，顺时针为正，逆时针为负，最大角度为180deg（即范围为-180deg~180deg）ui

　　不书写前缀时的角度方向以下：spa

　　webkit内核的浏览器（Chrome）的角度表示方法以下：code

　　代码及效果图以下：orm

结点

　　能够设置多种颜色的渐变，用多个结点表示，其中每一个颜色后加绝对单位（px）/相对单位（%）htm

　　首尾两个颜色不加单位时，默认分别为0%和100%

　　也可实现透明色的渐变效果（用两个rgba书写）

重复

　　让渐变效果在指定的区域内有重复，只须要在linear前加repeating便可

　　重复的次数看开始和结束颜色百分比

径向渐变radial gradient

　　从起点到终点进行圆形的渐变

分布

　　默认是均匀分布（在没有给各个颜色分配长度/百分比时）

　　也能够和线性渐变同样，给不一样颜色设置长度/百分比，以实现不均匀的分布

尺寸

　　渐变形状能够为圆形（circle）或椭圆（ellipse，默认值）

　　（有时候元素设置成了正多边形，会误觉得默认为圆形）

　　其中圆心的位置能够设置水平偏移和竖直偏移，尺寸的修改须要用四个参数调整（最近/远边/角）

重复

　　同线性渐变一致，加repeating来设置重复

IE渐变

　　只限于IE6-8

　　用如下的语法表达（实际用的是滤镜的方法）：

　　　　filter:progid:DXimageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='ff0000',GradientType=0);

　　其中开始和结束的颜色是用16进制来表达的

渐变的应用

马赛克地砖的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div{
10             width:500px;height:500px;
11             margin:30px auto;
12             border:1px dashed black;
13             background:#abcdef;
14             background-size:50px 50px;
15             background-image:linear-gradient(45deg,red 25%,transparent 25%),
16                        linear-gradient(-45deg,red 25%,transparent 25%),
17                        linear-gradient(45deg,transparent 75%,red 75%),
18                        linear-gradient(-45deg,transparent 75%,red 75%);
19         }
20     </style>
21 </head>
22 <body>
23     <div></div>
24 </body>
25 </html>

马赛克地砖