（点选下方社会公众号，可加速高度关注）
译者：luckykun
镜像：http://luckykun.com/work/2016-07-04/css3-study01.html
自CSS3盛行年来，尽管从前看完两遍大部份的追加特性，但只不过在前述工程项目中加进的寥寥无几。因此没逐步形成整体性的重新认识，和看见效用立刻就能想不到软件系统的潜能。接着前段时间刚好碰到两个须要绘出大批动画电影的市场需求，因此下定决心借此机会回去科学研究呵呵那个既熟识又孤单的css3。
在正式宣布已经开始css3以后，先来如是说许多较为经典之作的css3示例，让我们回去领略css3的气质，责任编辑会提及下列两个css3的特性：
border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow
border-radius
坚信那个特性，写过css的老师都晓得，用以造成梯形，比如画两个方形：
div {
width:100px;
height:100px;
background:red;
border-radius:100px;//border-radius:100%;
}
接着我们来看看它的语法：border-radius: [左上] [右上] [右下] [左下]，于是我们来画两个半圆
div {
width:100px;
height:50px;
background:red;
border-radius:50px50px00;
}
那如果要画两个椭圆该怎么办呢？你会发现上面的语法貌似做不到了，只不过border-radius的值还有一种语法: x半径/y半径：
div {
width:100px;
height:50px;
background:red;
border-radius:50px/25px;
}
如果我要画半个椭圆，又要咋办呢？
div {
width:100px;
height:50px;
background:red;
border-radius:100%00100%/50%;
}
::after
这里拿个简单的例子来看，我们要画两个放大镜，如下图：
分析呵呵，那个放大镜可以由两个div组成，两个是黑色的圆环，两个是黑色把手（旋转45度）。因此我们就须要用两个div来实现吗？答案是NO，两个div也是可以的，我们可以借助::after来添加两个元素。同理如果须要三个div，我们还可以使用::before再添加两个元素。下面看呵呵代码：
div {
width:50px;
height:50px;
border-radius:50%;
border:5pxsolid#333;
position:relative;
}
div::after {
content:;
display:block;
width:8px;
height:60px;
border-radius:5px;
background:#333;
position:absolute;
right:-22px;
top:38px;
transform:rotate(-45deg);
}
attr和content
比如说我们要实现两个悬浮提示的功能。传统方法，使用title特性就
假如我们的html代码如下：
<div data-title=”hello, world”>hello…</div>
我们来看看实现那个插件的css代码：
div {
position:relative;
}
div:hover::after {
content:attr(data-title);//取到data-title特性的值
display:inline-block;
padding:10px14px;
border:1pxsolid#ddd;
border-radius:5px;
position:absolute;
top:-50px;
left:-30px;
}
当hover的时候，在元素尾部添加两个内容为data-title特性值的元素，因此就实现了hover显示的效用，如下图所示：
box-sizing
我们晓得，在标准盒子模型中，元素的总宽＝content + padding + border + margin。 css中的盒子模型我们可能都晓得，但是那个盒子模型的特性可能没那么多人晓得，box-sizing特性就是用以重定义那个计算方式的，它有三个取值，分别是：content-box（默认）、border-box、padding-box
一般来说，假如我们须要有两个占宽200px、padding10px、border5px的div，经过计算，要这么定义样式。
div {
width:170px;//这里的宽度要使用200-10*2-5*2=170得到。
height:50px;
padding:10px;
border:5pxsolidred;
}
接着我们来使用呵呵box-sizing特性。
div {
box-sizing:border-box;
width:200px;//这里的宽度就是元素所占总宽度，不须要计算
height:50px;
padding:10px;
border:5pxsolidred;
}
linear-gradient
做活动页面的时候我们经常会碰到这样的市场需求：
顶部的中间一张大banner图片，接着整个区域的背景色要根据图片背景色渐变。就可以使用那个特性了。
div {
width:200px;
height:50px;
background:linear-gradient(toright,red,yellow,black,green);
}
是不是很有趣？只不过，linear-gradient还有更多有趣的功能，你可以根据下面的动图去领略：
你以为这就完了？等等，还有更强大的呢！repeating-linear-gradient，来领略：
linear-gradient还有更加强大的功能，比如说它可以给元素添加多个渐变，从而达到更NB的效用。
radial-gradient
上面的linear-gradient是线性渐变，那个特性是径向渐变。下面的代码实现了两个chrome的logo。
div.chrome {
width:180px;
height:180px;
border-radius:50%;
box-shadow:004px#999,002px#dddinset;
background:radial-gradient(circle,#4FACF50,#2196F328%,transparent28%),
radial-gradient(circle,#fff33%,transparent33%),
linear-gradient(-50deg,#FFEB3B34%,transparent34%),
linear-gradient(60deg,#4CAF5033%,transparent33%),
linear-gradient(180deg,#FF756B0,#F4433630%,transparent30%),
linear-gradient(-120deg,#FFEB3B40%,transparent40%),
linear-gradient(-60deg,#FFEB3B30%,transparent30%),
linear-gradient(0deg,#4CAF5045%,transparent45%),
linear-gradient(60deg,#4CAF5030%,transparent30%),
linear-gradient(120deg,#F4433650%,transparent50%),
linear-gradient(180deg,#F4433630%,transparent30%);
}
实现原理就是使用了多个渐变色放在div上，友协被遮住，视觉上就造成了想要的效用，是不是很强大！看了下图你就晓得只不过就是在div上加了很多个渐变。
box-shadow
上面的例子大都是对css3新特性的了解和重新认识，那个示例则是有关于软件系统的例子。
市场需求：我们要实现下面那个效用图（三个边框：黑色，绿色，红色）：
解法一：假如没css3知识，我们可以做这样做：用三个div，分别设置边框，接着分别控制宽高和位置来达到那个效用。显然，很复杂，这里就不贴代码了。
解法二：现在我们有css3的知识了，借助box-shadow就可以轻松解决那个问题。先来看看它的语法：box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色]，并且还能添加多个阴影，使用逗号隔开。当然你还可以继续增加，四重边框，五重边框……都不再是问题啦。另外，还能加梯形，阴影会贴紧内层div。
使用这种方法，有两个缺点就是，不支持虚线边框。
解法三： 使用outline（只能支持两重边框）使用这种方法的缺点就是，只能支持两层的边框，而且还不能根据容器的border-radius自动贴合。
总结
通过这段时间对css3的深入了解，发现css3真的很强大，科学研究起来还是挺有趣的，只有想不到，感觉没做不到。不过为了实现很酷炫的效用，可能须要编写大批的css代码，这个时候使用什么技术就须要我们自己来衡量了。
【今日微信公号推荐↓】
更多推荐请看《值得高度关注的技术和设计社会公众号》
其中推荐了包括技术、设计、极客 和 IT相亲相关的热门社会公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点选《值得高度关注的技术和设计社会公众号》，发现精彩！
