重拾css后的文章,在观看了慕课网上的视频《重拾CSS的乐趣》中,看到了一些有意思的css效果。想起当初自己初学CSS3时画的哆啦A梦,总结了一番css制作的各种图形。渐变效果是在实现弧边三角的时候学习的。
分享一下CodePen中的代码效果:
弧形demo
三角形demo
多重边框demo
渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。
渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中,渐变相当于背景图片,在理论上可在任何使用url() 值的地方采用,比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止,仅在背景图片中得到最完美的支持。
最新的浏览器都已经支持标准写法
-webkit-linear-gradient([||,]?,[,]*) //webkit引擎Chrome
-moz-linear-gradient([||,]?,[,]*) //Gecko引擎Firefox
-o-linear-gradient([||,]?,[,]*) //Presto引擎Opera
-ms-linear-gradient([||,]?,[,]*) //Trident引擎IE
linear-gradient([[ | to ],]?[,]+)//w3c标准
其中,point指向、angle角度代表方向,stop、color-stop代表各个颜色。
关键字写法:
background-image: -webkit-linear-gradient(left,blue,white);
background-image: -moz-linear-gradient(left,blue,white);
background-image: -o-linear-gradient(left,blue,white);
background-image: -ms-linear-gradient(left,blue,white);
background-image: linear-gradient(to right,blue,white);
有前缀的,第一个参数表示起点,第二个参数表示起点颜色,第三个参数表示终点颜色
标准写法,第一个参数表示方向,第二个参数表示起点颜色,第三个参数表示终点颜色
关键字有:left、right、top、bottom 对两者都有效
left top、left bottom、right top、right bottom等组合只对标准有效
角度写法:
有前缀的:
标准写法:
多色渐变:
在第二与第三个参数之间,即起点颜色与终点颜色之间,添加多个颜色参数
background-image: -webkit-linear-gradient(left,blue,red,white);
background-image: -moz-linear-gradient(left,blue,red,white);
background-image: -o-linear-gradient(left,blue,red,white);
background-image: -ms-linear-gradient(left,blue,red,white);
background-image: linear-gradient(to right,blue,red,white);
只需在你定义的颜色后面加上空格,再加上长度,如百分比、px等。
background-image: linear-gradient(270deg,blue 0%,red 14%,green 100%);
效果如下:
0%到14%是蓝到红的渐变,14%到100%是红到绿的渐变。
注意:如果定义的长度没有占满整个宽度或高度,那么起点或终点位置的空缺会由最近的颜色的纯色填满。
如:
background-image: linear-gradient(270deg,blue 10%,red 14%,green 80%);
效果如下:
颜色点被称为色标。
由此,得出了类似斑马线的彩色条纹,中间没有渐变效果。
background-image: linear-gradient(
270deg,
blue 0%,blue 20%,
red 20%,red 40%,
green 40%,green 60%,
orange 60%,orange 80%,
yellow 80%,yellow 100%
);
效果如下:
实践CodePen例子:线性渐变
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。比线性渐变更复杂。
最新的浏览器都已经支持标准写法
-webkit-radial-gradient([ || ,]?[ || ,]?,[,]*);//webkit引擎Chrome
-moz-radial-gradient([ || ,]?[ || ,]?,[,]*);//Gecko引擎Firefox
-o-radial-gradient([ || ,]?[ || ,]?,[,]*); //Presto引擎Opera
-ms-radial-gradient([ || ,]?[ || ,]?,[,]*); //Trident引擎IE
radial-gradient([[ || ] [at ]?,| at ,]?[,]+);//w3c标准
其中,postion、angle代表方向,shape、size代表形状大小,color-stop代表各个颜色。
position
left:设置左边为径向渐变圆心的横坐标值。
center:设置中间为径向渐变圆心的横坐标值或纵坐标。
right:设置右边为径向渐变圆心的横坐标值。
top:设置顶部为径向渐变圆心的纵标值。
bottom:设置底部为径向渐变圆心的纵标值。
shape
没有默认值,会根据容器选择。
circle:如果
ellipse:如果
size
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;默认值
background-image: radial-gradient(red,blue);
注意:此时形状会根据你的容器来选择圆形或者椭圆。
background-image: radial-gradient(circle,red,blue);//圆形
background-image: radial-gradient(ellipse,red,blue);//椭圆
注意:只加形状的话,在正方形容器中都会显示为圆形
background-image: radial-gradient(20px,red,blue);
background-image: radial-gradient(20px 50px,red,blue);
一个值表示圆形直径,两个值表示水平和垂直直径。
注意:这时,添加关键字circle和ellipse的话,在大小的前面后面是一样的,但是必须以空格形式,如ellipse 20px 50px
,且circle对应一个值和ellipse两个值,不然会出错。个人认为没必要添加。
background-image:-webkit-radial-gradient(20px 20px,red,blue);
background-image: radial-gradient(20px at 20px 20px,red,blue);
注意:加前缀写法的形状要写在方向的后面,如:20px 20px,circle
,以逗号隔开。标准写法的形状大小写在方向的前面,如:ellipse 20px 50px at 20px 20px
,以空格隔开。
background-image: radial-gradient(circle,red,blue,yellow,orange,green);
同前面的线性渐变。
如前面的线性渐变,通过设置色标的距离,能够做出特别的效果。
background-image: radial-gradient(
circle,
red 0%,red 20%,
blue 20%,blue 40%,
yellow 40%,yellow 60%,
orange 60%,orange 80%,
green 80%,green 100%
);
效果如下:
background-image: radial-gradient(
circle,
rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,
rgba(0,255,0,1) 50%,rgba(0,255,0,1) 100%
);
设置透明度使得其不会覆盖其他元素。
效果如下:
background-image: radial-gradient(
at top right,
rgba(0,0,0,0) 71%,rgba(0,0,0,0) 71%,
blue 0,blue 0
);
效果如下:
实践CodePen例子:径向渐变
通过repeating-linear-gradient
和repeating-radial-gradient
可以直接实现重复的渐变效果。
在没有重复渐变的属性之前,主要通过重复背景图像(使用background-repeat)创建线性重复渐变,但是没有创建重复的径向渐变的类似方式。
语法跟线性渐变是一样的,但是使用百分比设置色标的位置没有多大的意义,但使用像素和其他的单位,重复线性渐变可以创建一些很酷的效果。
background-image: repeating-linear-gradient(red,green 40px, orange 80px);
效果如下图所示:
background-image: repeating-radial-gradient(red,green 40px, orange 80px);
效果如下图所示:
每张纸都有横线条,左边有两条竖线从顶部延伸到底部。
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
background-size: 100% 30px;
position: relative;
}
body:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}
效果如下:
大漠老师的文章:1. 再说CSS3渐变——线性渐变 2. 再说CSS3渐变——径向渐变
说明:原文年代较为久远,有部分不符合实践,已经在本文中修改,望采纳。