线性渐变背景色:
<style> |
.linear { width:130px; height:130px; border:2px solid black; padding: 10px; |
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); |
-webkit-background-origin: padding; -webkit-background-clip: content; } |
</style> |
<div class="linear"></div> |
第一个参数为渐变方式,后两个参数为起始点位置和终止点位置,后两个参数为起始颜色和终止颜色,后面那个参数为背景区域padding表示包含padding的区域,content表示不包含content的区域,最后那个参数为背景的实际使用区域,可以为content或padding。
线性渐变的另一种简化写法:
<div style="border-radius:20px;height:200px; background:-webkit-linear-gradient(yellow,orange,red,green,blue,purple);">
</div>
![CSS3-渐变背景色 - lemon - 果禅 image: ../Art/rainbowgradient.jpg](https://i-blog.csdnimg.cn/blog_migrate/f92fcb101bbf48301a0cb65b213b3bab.jpeg)
![CSS3-渐变背景色 - lemon - 果禅 image: ../Art/diagonalgradients.jpg](https://i-blog.csdnimg.cn/blog_migrate/fb997a074c6b35796a01267efa51fbf3.jpeg)
放射性渐变:
<style> |
.radial { |
width:150px; |
height:150px; |
border:2px solid black; |
background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), |
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), |
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), |
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); |
display: block; |
} |
</style> |
<div class="radial"></div> |
radial之后的四个数字分别是起始点坐标,起始圆半径,终止点坐标,终止圆半径。to的颜色最后都变成了完全透明,否则的话不会受到终止圆范围的限制。color-stop可以有多个,用来调整渐变途径中的颜色。
此外,可以通过-webkit-background-size: 20px 50px;指定一块背景区域的长,高,或-webkit-background-size: 20px;同时指定长和高,来指定
一个背景区域的大小。这样可以实现平铺的效果等。
放射性渐变的另一种写法:
![CSS3-渐变背景色 - lemon - 果禅 image: ../Art/radialgradient.jpg](https://i-blog.csdnimg.cn/blog_migrate/bfe2dca68e567844f4d2911651aabddb.jpeg)
safari对渐变的实现默认并不是圆形,而是上面那样根据div的大小变化的椭圆形,但是chrome的实现是圆形。如果safari要实现标准的圆形,可改为(circle,white,black).
放射性边框图片:
-webkit-border-image: -webkit-radial-gradient(white,red) 100%;
![CSS3-渐变背景色 - lemon - 果禅 image: ../Art/gradientborder.jpg](https://i-blog.csdnimg.cn/blog_migrate/94061a9990cc7c9eaae7769767eedd80.jpeg)
方式性渐变图片作为蒙板(实现文字现实区域跟随鼠标移动而变化):
<style>
#c{
background:white;
-webkit-mask-box-image: -webkit-radial-gradient(50% 50%, white, transparent 80px);
}
</style>