一、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中的渐变编辑器如下所示：

CSS兼容性如下：

各个浏览器语法如下：

-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的蛋疼的径向渐变

转载于:https://www.cnblogs.com/strick/p/4843595.html

CSS3中border-radius、box-shadow与gradient那点事儿相关推荐

html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
CSS3中的3D变换与简易立方体的制作
大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换. 我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外.CSS的3d变换中,有以下属性: A.3D旋转: CS ...

CSS3中border-radius、box-shadow与gradient那点事儿

一、border-radius

二、box-shadow

三、CSS3 Gradient

CSS3中border-radius、box-shadow与gradient那点事儿相关推荐

最新文章

热门文章