一、border-radius
border-radius用于添加圆角边框,用处非常广泛。
1)一个值,代表了四个角
.radius-one { /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; }
2)三个值,中间的值代表右上和左下
.radius-three { /* top left, top right|bottom left, bottom right */ border-radius: 5px 20px 5px; }
3)斜杠设置第二组值
“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL(上右下左)的顺序原则。左上角是10px/40px,右上角是20px/30px,以此类推。
.radius-five { border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; /* horizontal radius / vertical radius */ }
4)背景图将被裁剪
.radius-img { background: url(img.jpg) no-repeat right bottom; border-radius: 12px; }
二、box-shadow
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
box-shadow: h-shadow v-shadow blur spread color inset;
偏移方向如下图所示:
1)单层阴影
.box-shadow { /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ box-shadow: 3px 3px 5px 6px #ccc; }
2)多重阴影
黑色:带模糊和阴影尺寸
紫色与黄色:只有水平和垂直
红色与蓝色:水平、垂直以及模糊
.box-shadow-more { box-shadow: 0 0 10px 5px black, 40px -30px purple, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue; }
三、CSS3 Gradient
1)linear-gradient(线性渐变)
在创建渐变的过程中,可以指定多个中间颜色值,这个值称为色标。每个色标包含一种颜色和一个位置,浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变。
PhotoShop中的渐变编辑器如下所示:
各个浏览器语法如下:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
下面是一个实例,与上面的语法一一对应,顺序也是一样的:
.linear-gradient { background: -moz-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(50%,rgba(255,156,35,1))); background: -webkit-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
background: -o-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 ); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcb48, endColorstr=#ff9c23)";
background: linear-gradient(to bottom, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
}
标准语法对于方向需要使用一个to,而且写的方向要与其它的相反,如果是top,这里就是bottom
第二个颜色我用了个50%,开始渐变的起始位置
还可以设置角度,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。
-filter、-ms-filter和-webkit-gradient就不能用啦。
.linear-gradient-angle { background: -moz-linear-gradient(45deg, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%); background: -webkit-linear-gradient(45deg, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%); background: -o-linear-gradient(45deg, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%); background: linear-gradient(45deg, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%); }
2)radial-gradient(径向渐变)
CSS兼容性与上面的线性渐变类似。
各个浏览器语法如下:
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); -o-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
下面是一个实例,与上面的语法一一对应:
.radial-gradient { background: -moz-radial-gradient(10px 20px, #f00, #ff0 40%, #080); background: -webkit-radial-gradient(10px 20px, #f00, #ff0 40%, #080); background: -o-radial-gradient(10px 20px, #f00, #ff0 40%, #080); background: radial-gradient(at 10px 20px, #f00, #ff0 40%, #080); }
标准语法对于坐标需要使用一个at;
第二个颜色我用了个40%,开始渐变的起始位置
demo下载:
http://download.csdn.net/detail/loneleaf1/9146297
参考资料:
https://css-tricks.com/almanac/properties/b/border-radius/ css-tricks border-radius
http://www.cnblogs.com/mofish/p/3832136.html 从css3书写顺序引出来的border-radius参数
https://css-tricks.com/almanac/properties/b/box-shadow/ css-tricks border-shadow
http://www.basecss.net/article/box-shadow.html [译]Box-shadow, CSS3最好的特性之一
http://www.webhek.com/css-box-shadow-property CSS阴影效果(Box-shadow)用法趣味讲解
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html CSS3 线性渐变(linear-gradient)
http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html CSS3 径向渐变(radial-gradient)
http://www.w3cplus.com/css3/new-css3-linear-gradient.html 再说CSS3渐变——线性渐变
http://blog.csdn.net/playboyanta123/article/details/9303857 radial-gradient CSS3的蛋疼的径向渐变