CSS3在样式上提供了非常丰富的选择，目前由于浏览器的问题，部分新的样式需要加载前缀才可以让不同的浏览器识别
Firefox：-moz-
Chrome：-webkit-
Opera：-o- 这个这个太萌了
Safari：-webkit-
IE：-ms-
Border
先说下新的边框样式，新的边框样式提供了可定制的圆角，阴影和图片边框的控制。先看一个简单的案例
div
{
width: 100px;
height: 100px;
border-style: solid;
border-width: 15px 2px 5px 3px;
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}
上面的代码描述了一个圆弧角的矩形，并且有阴影。圆弧角的值是x/y，x是水平半径，y是垂直半径，如果y不设置，那y=x。radius可以简写到一起
border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px;
来看下阴影
box-shadow: -3px 3px 2px 2px rgb(10,20,30);
值的格式分别为：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
xy值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边
投影方式默认是外阴影，如果要设置，必定是inset
border: 12px solid blue;
background-color: Orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;
然后是边框图片，这个有点不直观
-webkit-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;
-moz-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;
上面的代码就是说，把图片按上右下左的次序（15px 3px 5px 3px 但不要写单位，默认就是px）切成9块，四个尖角切出的不动，其他都按宽高拉伸变形。
变形的参数有stretch/round/repeat/space，可以设置x y，也可以设x，那x=y了。
Backgrounds
css2对北京图片的处理是放置一个，平铺，x和y方向，现在我们可以选择新的背景图片大小的方式
width: 530px;
height: 330px;
background-image: url(http://www.witshare.org/css/images/mm_light.png);
background-size:cover;
background-repeat:no-repeat;
使用size可以让图片适应元素的大小：cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，
contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这两种方法都会使用图片失真。
还可以定位背景的位置区域
padding: 20px;
border: solid 30px red;
background-color: Lime;
background-repeat: no-repeat;
-moz-background-origin: padding;
-webkit-background-origin: padding;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;
-o-background-origin: padding-box;
background-origin: padding-box;
以上的特性可以多个图片来源重叠，下面的案例描述了如何把三张牌叠放到一起的（为什么我每次都用牌来做案例呢？）
width: 300px;
height: 300px;
background-image: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);
background-position: 0px 0px,3px 20px,6px 40px;
background-origin: content-box;
Text
看看下demo
span
text-shadow: 5px 5px 5px #FF0000;
word-wrap: break-word;
text-overflow: ellipsis;
阴影的参数是 x轴 y轴 模糊度 颜色
换行就是一个：在边界内换行
文本溢出的话有两个值 clip：不显示省略标记（...），而是简单的裁切。ellipsis：当对象内文本溢出时显示省略标记（...）
Font
以前我们尽量用标准字体，应为考虑到客户端没有安装我们设计用的字体，现在css3开始支持在线字体了
以下应用了google的一个很漂亮的字体
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
span
{
font-family: 'Tangerine' , serif;
font-size: 48px;
}
</style>
Transforms
汽车人，变形出发。css3开始支持2D的变形啦
下面的代码描述了如何顺时针旋转
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-moz-transform: rotate(15deg);
下面是沿xy轴移动，可以通过translateX/y来个体设定
transform: translate(10px,100px);
-ms-transform: translate(10px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(10px,100px);
-moz-transform: translate(10px,100px);
缩放，缩放的值是倍数，以下代码得到200*100的矩形，同样可以通过scalex/y来各自细化值
transform: scale(2,1);
-ms-transform: scale(2,1);
-webkit-transform: scale(2,1);
-o-transform: scale(2,1);
-moz-transform: scale(2,1);
扭曲通过描述xy上的角度来变形，同样可以xy细化
transform: skew(10deg,20deg);
-ms-transform: skew(10deg,20deg);
-webkit-transform: skew(10deg,20deg);
-o-transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
矩阵变形，通过6个值完全重新定位元素
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
换变形中心点
transform: rotate(45deg);
transform-origin: 20% 40%;
-ms-transform: rotate(45deg);
-ms-transform-origin: 20% 40%;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 20% 40%;
-moz-transform: rotate(45deg);
-moz-transform-origin: 20% 40%;
-o-transform: rotate(45deg);
-o-transform-origin: 20% 40%;
也可以对一个变形动作给出时间和事件控制。
transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。
值的变换速率有6个可能值
ease逐渐变慢 0.25, 0.1, 0.25, 1.0
linear 匀速 0.0, 0.0, 1.0, 1.0
ease-in 加速 0.42, 0, 1.0, 1.0
ease-out 减速 0, 0, 0.58, 1.0
ease-in-out 加速然后减速 0.42, 0, 0.58, 1.0
cubic-bezier
transition-delay是用来指定一个动画开始执行的时间,意思是当改变元素属性值后多长时间开始执行transition效果
下面是一个简单的案例
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s, -o-transform 2s;
}
div:hover
width: 200px;
height: 200px;
background-color:Blue;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
以下的代码描述了不同的加速情况
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title></title>
<style>
box
{
border: 1px solid #ccc;
padding: 10px;
height: 400px;
width: 400px;
}
.transition-demo
width: 100px;
height: 100px;
border: 12px solid blue;
background-color: Orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;
text-align: center;
line-height: 50px;
color: #fff;
margin-bottom: 10px;
#ease
-moz-transition: all 5s ease 0.3s;
-webkit-transition: all 5s ease 0.3s;
-o-transition: all 5s ease 0.3s;
transition: all 5s ease 0.3s;
background: #f36;
#ease-in
-moz-transition: all 3s ease-in 0.5s;
-webkit-transition: all 3s ease-in 0.5s;
-o-transition: all 3s ease-in 0.5s;
transition: all 3s ease-in 0.5s;
background: #369;
#ease-out
-moz-transition: all 5s ease-out 0s;
-webkit-transition: all 5s ease-out 0s;
-o-transition: all 5s ease-out 0s;
transition: all 5s ease-out 0s;
background: #636;
#ease-in-out
-moz-transition: all 1s ease-in-out 2s;
-webkit-transition: all 1s ease-in-out 2s;
-o-transition: all 1s ease-in-out 2s;
transition: all 1s ease-in-out 2s;
background: #3e6;
#linear
-moz-transition: all 6s linear 0s;
-webkit-transition: all 6s linear 0s;
-o-transition: all 6s linear 0s;
transition: all 6s linear 0s;
background: #999;
#cubic-bezier
-moz-transition: all 4s cubic-bezier 1s;
-webkit-transition: all 4s cubic-bezier 1s;
-o-transition: all 4s cubic-bezier 1s;
transition: all 4s cubic-bezier 1s;
background: #6d6;
#box.timings-demo-hover .transition-demo, #box:hover .transition-demo
-moz-transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
transform: rotate(360deg) scale(1.2);
border: 1px solid rgba(255,230,255,08);
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
margin-left: 280px;
height: 30px;
line-height: 30px;
margin-bottom: 15px;
</style>
</head>
<body>
<div id="box">
<div id="linear" class="transition-demo">
匀速</div>
<div id="ease" class="transition-demo">
逐渐变慢</div>
<div id="ease-in" class="transition-demo">
加速</div>
<div id="ease-out" class="transition-demo">
减速</div>
<div id="ease-in-out" class="transition-demo">
加速然后减速</div>
<div id="cubic-bezier" class="transition-demo">
自定义</div>
</div>
</body>
</html>
当然css3也提供了真正的动画处理方式Animation，Animation和其他很多动画技术一样，采用的是关键帧Keyframes，但控制比较多，下次我独立写一个关于css动画的吧。
Columns
我们有讨论过说，web页面就是文档，文档上的元素布局是非常重要的，往往我们需要对文字进行竖排布局，现在css3开始支持了。不过IE9不支持。
css的columns支持多列，列边距，列边框和夸列，下面的代码描述了这些实现
<style type="text/css">
article
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
-moz-column-width: auto;
-webkit-column-width: auto;
column-width: auto;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-moz-column-rule: 5px solid red;
-webkit-column-rule: 5px solid red;
column-rule: 5px solid red;
h1
background: orange;
border-bottom: 3px double;
margin: 5px 0;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
<article>
<h1>
计算机专业不好吗？</h1>
<p>
计算机专业曾经是考大学最热门的专业之一——你想啊，现在我们已经进入信息社会，
计算机技术已经渗透到我们工作和生活的各个角落，而且，人类社会的发展也要建立在计算机技术大发展的基础之上，
这个专业当然应该是很有前景的！然而，由于前几年计算机和软件相关专业的招生量急剧膨胀，
高校的师资和其他相关资源的瓶颈制约了对计算机人才的培养。就我们的调查来看，
很多高校老师都没有真正的企业实践经验，所以往往把一些专业课和基础课上得很“枯燥”，
理论阐述太多、实践动手很少、课程门类开得太多、技术之间的联系讲得太少，学生的学习兴趣提不起来。
因此，企业对于大学毕业生也不太“感冒”，认为大学生眼高手低、知识和技能滞后、什么都不会做！
其实，很多计算机专业的学生都有和你一样的痛苦，你不是一个人在苦恼！我们认为，不是专业出了问题，
而是专业人才的教育和训练出了问题。最近几年，中国企业对软件人才的需求量每年都在以30%以上的速度增长，
很多企业求才若渴：软件业的大学生，入职薪资就要比平均薪资高20%，
而且一般过三～五年，月薪就能实现翻两番达到万元以上！
除了计算机，还有哪个行业的薪资增长有这样的速度？
</p>
</article>
本文转自shyleoking 51CTO博客，原文链接:http://blog.51cto.com/shyleoking/806937
![Docker：安装Docker Compose[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)