css 3背景色的过渡样式。
过渡样式有两种,线性渐变 (linear-gradient)和 径向渐变 (Radial-gradient)
linear-gradient
该语法至少要有三个参数([起始位置 x y] 方向或角度, 颜色节点,颜色节点 [,颜色节点])
方向可选参数:to bottom、to top、to right、to left、to bottom right,等等
关于角度
但是,请注意很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。
linear-gradient(direction, color-stop1, color-stop2 [, ...])
例:background-image: linear-gradient(10 10 -90deg, red 0%, yellow 100%);
background-image:-webkit- linear-gradient(-90deg, red 0%, yellow 100%);
background-image: -moz-linear-gradient(-90deg, red 0%, yellow 100%);
background-image: -o-linear-gradient(-90deg, red 0%, yellow 100%);
IE 浏览器·
IE6-8浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
第一个参数:渐变起始位置的颜色
第二个参数:渐变终止位置的颜色
第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
高级用法:
原文链接: https://www.jianshu.com/p/3c652606e6d6
制作切角效果:background-image: /*过渡类似于背景图片的用法*/
linear-gradient(135deg, transparent 15px,#F8E2EB 0) top left,
linear-gradient(-135deg, transparent 15px,#ace 0) top right,
linear-gradient(-45deg, transparent 15px,#F8E2EB 0)bottom right,
linear-gradient(45deg, transparent 15px,#ace 0)bottom left;
background-size:50% 50%; /*每个块在水平和垂直方向上都占元素尺寸的50%*/
background-repeat:no-repeat;
上边样式的效果图
内凹圆角效果
background:radial-gradient(circle at top left,transparent 15px,#F8E2EB0) top left,
radial-gradient(circle at top right,transparent 15px,#ace0) top right,
radial-gradient(circle at bottom right,transparent 15px,#F8E2EB0) bottom right,
radial-gradient(circle at bottom left,transparent 15px,#ace0) bottom left;
background-size:50%50%;
background-repeat:no-repeat;
圆角效果图
Radial-gradienty
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape:径向渐变的形状 可选: circle ellipse
size:可选四个参数 closest-side | closest-corner | farthest-side | farthest-corner 最近的边,最近的角,最远的边,最远的角。也可以设置半径,如果是圆 设置一个半径值,如果是椭圆,需要设置短半径和长半径值
position: 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
color-stop:颜色节点,同linear-gradient
例:background-image: radial-gradient(circle closest-side,red 5%, yellow 15%, green 60%);
background-image: radial-gradient(circle 15px at 15% 20% ,red 5%, yellow 15%, green 60%);