CSS3体验入门

CSS3在样式上提供了非常丰富的选择，目前由于浏览器的问题，部分新的样式需要加载前缀才可以让不同的浏览器识别

Firefox：-moz-

Chrome：-webkit-

Opera：-o- 这个这个太萌了

Safari：-webkit-
 

IE：-ms-

 

Border

先说下新的边框样式，新的边框样式提供了可定制的圆角，阴影和图片边框的控制。先看一个简单的案例

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     border-style: solid;  
6.     border-width: 15px 2px 5px 3px;  
7.     border-top-left-radius: 10px 20px;  
8.     border-top-right-radius: 15px;  
9.     border-bottom-right-radius: 20px 10px;  
10.     border-bottom-left-radius: 30px 15px;  
11. } 

上面的代码描述了一个圆弧角的矩形，并且有阴影。圆弧角的值是x/y，x是水平半径，y是垂直半径，如果y不设置，那y=x。radius可以简写到一起

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     border-style: solid;  
6.     border-width: 15px 2px 5px 3px;  
7.     border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px;   
8. } 

来看下阴影

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     border-style: solid;  
6.     border-width: 15px 2px 5px 3px;  
7.     box-shadow: -3px 3px 2px 2px rgb(10,20,30);  
8. } 

值的格式分别为：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色
xy值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边

投影方式默认是外阴影，如果要设置，必定是inset

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     border: 12px solid blue;  
6.     background-color: Orange;  
7.     border-top-left-radius: 60px 90px;  
8.     border-bottom-right-radius: 60px 90px;  
9.     box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;  
10. } 

然后是边框图片，这个有点不直观

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     border-style: solid;  
6.     border-width: 15px 2px 5px 3px;  
7.     -webkit-border-p_w_picpath: url(http://www.witshare.org/css/p_w_picpaths/mm_light.png) 15 3 5 3 stretch;  
8.     -moz-border-p_w_picpath: url(http://www.witshare.org/css/p_w_picpaths/mm_light.png) 15 3 5 3 stretch;  
9. } 

上面的代码就是说，把图片按上右下左的次序（15px 3px 5px 3px 但不要写单位，默认就是px）切成9块，四个尖角切出的不动，其他都按宽高拉伸变形。

 

变形的参数有stretch/round/repeat/space，可以设置x y，也可以设x，那x=y了。

 

Backgrounds
 

css2对北京图片的处理是放置一个，平铺，x和y方向，现在我们可以选择新的背景图片大小的方式

1. div  
2. {  
3.     width: 530px;  
4.     height: 330px;  
5.     background-p_w_picpath: url(http://www.witshare.org/css/p_w_picpaths/mm_light.png);  
6.     background-size:cover;  
7.     background-repeat:no-repeat;  
8. } 

使用size可以让图片适应元素的大小：cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，
contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这两种方法都会使用图片失真。

 

还可以定位背景的位置区域

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     padding: 20px;  
6.     border: solid 30px red;  
7.     background-color: Lime;  
8.     background-p_w_picpath: url(http://www.witshare.org/css/p_w_picpaths/mm_light.png);  
9.     background-repeat: no-repeat;  
10.     -moz-background-origin: padding;  
11.     -webkit-background-origin: padding;  
12.     -moz-background-origin: padding-box;  
13.     -webkit-background-origin: padding-box;  
14.     -o-background-origin: padding-box;  
15.     background-origin: padding-box;  
16. } 

以上的特性可以多个图片来源重叠，下面的案例描述了如何把三张牌叠放到一起的（为什么我每次都用牌来做案例呢？）

1. div  
2. {  
3.     width: 300px;  
4.     height: 300px;  
5.     background-p_w_picpath: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);  
6.     background-repeat: no-repeat;  
7.     background-position: 0px 0px,3px 20px,6px 40px;  
8.     background-origin: content-box;  
9. } 

Text

 

看看下demo

1. span  
2. {  
3.     text-shadow: 5px 5px 5px #FF0000;  
4.     word-wrap: break-word;  
5.     text-overflow: ellipsis;  
6. } 

阴影的参数是 x轴 y轴 模糊度 颜色

 

换行就是一个：在边界内换行

文本溢出的话有两个值 clip：不显示省略标记（...），而是简单的裁切。ellipsis：当对象内文本溢出时显示省略标记（...）

 

Font

以前我们尽量用标准字体，应为考虑到客户端没有安装我们设计用的字体，现在css3开始支持在线字体了

以下应用了google的一个很漂亮的字体

1. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">  
2. <style>  
3.     span  
4.     {  
5.         font-family: 'Tangerine' , serif;  
6.         font-size: 48px;  
7.     }  
8. </style> 

关于google更多的字体可以看下Google Web Fonts

 

 

Transforms
 

汽车人，变形出发。css3开始支持2D的变形啦

下面的代码描述了如何顺时针旋转

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: rotate(15deg);  
7.     -ms-transform: rotate(15deg);  
8.     -webkit-transform: rotate(15deg);  
9.     -o-transform: rotate(15deg);  
10.     -moz-transform: rotate(15deg);  
11. } 

下面是沿xy轴移动，可以通过translateX/y来个体设定

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: translate(10px,100px);  
7.     -ms-transform: translate(10px,100px);  
8.     -webkit-transform: translate(50px,100px);  
9.     -o-transform: translate(10px,100px);  
10.     -moz-transform: translate(10px,100px);  
11. } 

缩放，缩放的值是倍数，以下代码得到200*100的矩形，同样可以通过scalex/y来各自细化值

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: scale(2,1);  
7.     -ms-transform: scale(2,1);  
8.     -webkit-transform: scale(2,1);  
9.     -o-transform: scale(2,1);  
10.     -moz-transform: scale(2,1);  
11. } 

扭曲通过描述xy上的角度来变形，同样可以xy细化

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: skew(10deg,20deg);  
7.     -ms-transform: skew(10deg,20deg);  
8.     -webkit-transform: skew(10deg,20deg);  
9.     -o-transform: skew(10deg,20deg);  
10.     -moz-transform: skew(10deg,20deg);  
11. } 

矩阵变形，通过6个值完全重新定位元素

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: matrix(0.866,0.5,-0.5,0.866,0,0);  
7.     -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);  
8.     -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);  
9.     -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);  
10.     -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);  
11. } 

换变形中心点

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transform: rotate(45deg);  
7.     transform-origin: 20% 40%;  
8.     -ms-transform: rotate(45deg);  
9.     -ms-transform-origin: 20% 40%;  
10.     -webkit-transform: rotate(45deg);  
11.     -webkit-transform-origin: 20% 40%;  
12.     -moz-transform: rotate(45deg);  
13.     -moz-transform-origin: 20% 40%;  
14.     -o-transform: rotate(45deg);  
15.     -o-transform-origin: 20% 40%;  
16. } 

也可以对一个变形动作给出时间和事件控制。

 

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效果
 

下面是一个简单的案例

1. div  
2. {  
3.     width: 100px;  
4.     height: 100px;  
5.     background-color: Orange;  
6.     transition: width 2s, height 2s;  
7.     -moz-transition: width 2s, height 2s, -moz-transform 2s;  
8.     -webkit-transition: width 2s, height 2s, -webkit-transform 2s;  
9.     -o-transition: width 2s, height 2s, -o-transform 2s;  
10. }  
11. div:hover  
12. {  
13.     width: 200px;  
14.     height: 200px;  
15.     background-color:Blue;  
16.     transform: rotate(360deg);  
17.     -moz-transform: rotate(360deg);  
18.     -webkit-transform: rotate(360deg);  
19.     -o-transform: rotate(360deg);  
20. } 

以下的代码描述了不同的加速情况

1. <!DOCTYPE html> 
2. <html lang="zh-cn"> 
3. <head> 
4.     <title></title> 
5.     <style> 
6.         box  
7.         {  
8.             border: 1px solid #ccc;  
9.             padding: 10px;  
10.             height: 400px;  
11.             width: 400px;  
12.         }  
13.         .transition-demo  
14.         {  
15.             width: 100px;  
16.             height: 100px;  
17.             border: 12px solid blue;  
18.             background-color: Orange;  
19.             border-top-left-radius: 60px 90px;  
20.             border-bottom-right-radius: 60px 90px;  
21.             box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;  
22.             text-align: center;  
23.             line-height: 50px;  
24.             text-align: center;  
25.             color: #fff;  
26.             margin-bottom: 10px;  
27.         }  
28.         #ease  
29.         {  
30.             -moz-transition: all 5s ease 0.3s;  
31.             -webkit-transition: all 5s ease 0.3s;  
32.             -o-transition: all 5s ease 0.3s;  
33.             transition: all 5s ease 0.3s;  
34.             background: #f36;  
35.         }  
36.         #ease-in  
37.         {  
38.             -moz-transition: all 3s ease-in 0.5s;  
39.             -webkit-transition: all 3s ease-in 0.5s;  
40.             -o-transition: all 3s ease-in 0.5s;  
41.             transition: all 3s ease-in 0.5s;  
42.             background: #369;  
43.         }  
44.         #ease-out  
45.         {  
46.             -moz-transition: all 5s ease-out 0s;  
47.             -webkit-transition: all 5s ease-out 0s;  
48.             -o-transition: all 5s ease-out 0s;  
49.             transition: all 5s ease-out 0s;  
50.             background: #636;  
51.         }  
52.         #ease-in-out  
53.         {  
54.             -moz-transition: all 1s ease-in-out 2s;  
55.             -webkit-transition: all 1s ease-in-out 2s;  
56.             -o-transition: all 1s ease-in-out 2s;  
57.             transition: all 1s ease-in-out 2s;  
58.             background: #3e6;  
59.         }  
60.         #linear  
61.         {  
62.             -moz-transition: all 6s linear 0s;  
63.             -webkit-transition: all 6s linear 0s;  
64.             -o-transition: all 6s linear 0s;  
65.             transition: all 6s linear 0s;  
66.             background: #999;  
67.         }  
68.         #cubic-bezier  
69.         {  
70.             -moz-transition: all 4s cubic-bezier 1s;  
71.             -webkit-transition: all 4s cubic-bezier 1s;  
72.             -o-transition: all 4s cubic-bezier 1s;  
73.             transition: all 4s cubic-bezier 1s;  
74.             background: #6d6;  
75.         }  
76.         #box.timings-demo-hover .transition-demo, #box:hover .transition-demo  
77.         {  
78.             -moz-transform: rotate(360deg) scale(1.2);  
79.             -webkit-transform: rotate(360deg) scale(1.2);  
80.             -o-transform: rotate(360deg) scale(1.2);  
81.             transform: rotate(360deg) scale(1.2);  
82.             background: #369;  
83.             border: 1px solid rgba(255,230,255,08);  
84.             -moz-border-radius: 25px;  
85.             -webkit-border-radius: 25px;  
86.             border-radius: 25px;  
87.             margin-left: 280px;  
88.             height: 30px;  
89.             line-height: 30px;  
90.             margin-bottom: 15px;  
91.         }  
92.     </style> 
93. </head> 
94. <body> 
95.     <div id="box"> 
96.         <div id="linear" class="transition-demo"> 
97.             匀速</div> 
98.         <div id="ease" class="transition-demo"> 
99.             逐渐变慢</div> 
100.         <div id="ease-in" class="transition-demo"> 
101.             加速</div> 
102.         <div id="ease-out" class="transition-demo"> 
103.             减速</div> 
104.         <div id="ease-in-out" class="transition-demo"> 
105.             加速然后减速</div> 
106.         <div id="cubic-bezier" class="transition-demo"> 
107.             自定义</div> 
108.     </div> 
109. </body> 
110. </html> 

当然css3也提供了真正的动画处理方式Animation，Animation和其他很多动画技术一样，采用的是关键帧Keyframes，但控制比较多，下次我独立写一个关于css动画的吧。

 

 

Columns
 

我们有讨论过说，web页面就是文档，文档上的元素布局是非常重要的，往往我们需要对文字进行竖排布局，现在css3开始支持了。不过IE9不支持。

css的columns支持多列，列边距，列边框和夸列，下面的代码描述了这些实现

1. <head> 
2.     <title></title> 
3.     <style type="text/css"> 
4.         article  
5.         {  
6.             -moz-column-count: 5;  
7.             -webkit-column-count: 5;  
8.             column-count: 5;  
9.             -moz-column-width: auto;  
10.             -webkit-column-width: auto;  
11.             column-width: auto;  
12.             -webkit-column-gap: 5px;  
13.             -moz-column-gap: 5px;  
14.             column-gap: 5px;  
15.             -webkit-column-gap: 20px;  
16.             -moz-column-gap: 20px;  
17.             column-gap: 20px;  
18.             -moz-column-rule: 5px solid red;  
19.             -webkit-column-rule: 5px solid red;  
20.             column-rule: 5px solid red;  
21.         }  
22.         h1  
23.         {  
24.             background: orange;  
25.             border-bottom: 3px double;  
26.             margin: 5px 0;  
27.             -webkit-column-span: all;  
28.             -moz-column-span: all;  
29.             column-span: all;  
30.         }  
31.     </style> 
32. </head> 
33. <body> 
34.     <article> 
35.         <h1> 
36.             计算机专业不好吗？</h1> 
37.         <p> 
38.         计算机专业曾经是考大学最热门的专业之一——你想啊，现在我们已经进入信息社会，  
39.         计算机技术已经***到我们工作和生活的各个角落，而且，人类社会的发展也要建立在计算机技术大发展的基础之上，  
40.         这个专业当然应该是很有前景的！然而，由于前几年计算机和软件相关专业的招生量急剧膨胀，  
41.         高校的师资和其他相关资源的瓶颈制约了对计算机人才的培养。就我们的调查来看，  
42.         很多高校老师都没有真正的企业实践经验，所以往往把一些专业课和基础课上得很“枯燥”，  
43.         理论阐述太多、实践动手很少、课程门类开得太多、技术之间的联系讲得太少，学生的学习兴趣提不起来。  
44.         因此，企业对于大学毕业生也不太“感冒”，认为大学生眼高手低、知识和技能滞后、什么都不会做！  
45.         其实，很多计算机专业的学生都有和你一样的痛苦，你不是一个人在苦恼！我们认为，不是专业出了问题，  
46.         而是专业人才的教育和训练出了问题。最近几年，中国企业对软件人才的需求量每年都在以30%以上的速度增长，  
47.         很多企业求才若渴：软件业的大学生，入职薪资就要比平均薪资高20%，  
48.         而且一般过三～五年，月薪就能实现翻两番达到万元以上！  
49.         除了计算机，还有哪个行业的薪资增长有这样的速度？  
50.         </p> 
51.     </article> 
52. </body> 

 

转载于:https://blog.51cto.com/shyleoking/806937