The document discusses CSS3 techniques including rounded borders, box shadows, transitions, animations, and multi-column layouts. It provides code examples for applying various CSS3 properties such as border-radius, box-shadow, transform, transition, and animation. It also introduces CSS3 selectors like nth-of-type and nth-last-child for selecting elements by their position.

1. HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

2. CSS3 / STYLING
设计更丰富的样式，排版和布局吧！

3. CSS3 边框

4. 圆角
Web页面元素默认都是长方形的，我们需要为这些元素添加圆角效果，使用户界面看起来更柔和一些。
下列浏览器支持 border-radius 属性：IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
安博中程在线
<style>
.round-border {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<img src="/images/border.png" class="round-border">
HTML
4/24

5. Gravatar 头像
使用百分比
安博中程在线
<style>
.gravatarimg{
border-radius:50%50%50%50%;
}
</style>
<divclass="gravatar">
<imgsrc="/demo/css3/images/gravatar.jpeg">
</div>
HTML
5/24

6. 边框阴影
安博中程在线
<style>
div.shadow_box{
box-shadow: 10px 10px 5px #999;
width: 300px;
height: 100px;
background-color: yellow;
}
</style>
HTML
水平偏移量， 正数代表阴影会出现在右边，负数左边；
垂直偏移量， 正数代表阴影会出现在目标元素的下面，负数上面；
模糊半径，值越大，阴影越模糊。
阴影的颜色
下列浏览器支持 box-shadow 属性： IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1。
text-shadow 属性被所有的主流浏览器支持, 除了IE。
·
·
·
·
·
·
6/24

7. 边框图片
border-image 属性指定使用图片作为边框。
平铺效果
拉伸效果
原图:
安博中程在线
#round {
border-image:url(borderimage.png) 30 30 round;
}
#stretch {
border-image:url(borderimage.png) 30 30 stretch;
}
HTML
7/24

8. CSS3 变换和动画

9. 旋转
Rotate
安博中程在线
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);/*IE9*/
-moz-transform:rotate(-10deg);/*Firefox*/
-webkit-transform:rotate(-10deg);/*SafariandChrome*/
-o-transform:rotate(-10deg);/*Opera*/
HTML
9/24

10. 缩放
安博中程在线
#dnd-thumbnailsimg:hover{
-webkit-transform:scale(2.0)rotate(10deg);
-webkit-transform-origin:50%75px;
-moz-transform:scale(2.0)rotate(10deg);
-moz-transform-origin:50%75px;
margin:0100px;
}
HTML
10/24

11. Transition
安博中程在线
指定给哪些CSS属性添加效果；
指定效果时长；
·
·
div.width-effect {
width:100px;
transition: width 1s;
}
div.width-effect:hover {
width:500px;
}
HTML
11/24

12. 动画
安博中程在线
@keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
#animation:hover {
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
-o-animation:myfirst 3s; /* Opera */
}
CSS
@keyframe规则
指定animation的名字和时长
使用from和to指定开始和完成
也可以使用百分比形式
·
·
·
·
12/24

13. 指定百分比
安博中程在线
#animation2 {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mySecond;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
@keyframes mySecond
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
HTML
13/24

14. 动画
Demo
安博中程在线 14/24

15. 动画
Demo
安博中程在线 15/24

16. Multiple Columns
主要的属性设置
安博中程在线
.newspaper {
column-count:3;
column-gap:40px;
column-rule:2px outset #333;
}
HTML
column-count: 分几栏
column-gap: 栏间距
column-rule: 设置栏属性（宽度，样式，颜色）
·
·
·
16/24

17. 分栏前
Tips for Designing Great Icons and Images
Beautiful, compelling icons and images are a fundamental part of the iOS user experience. Far from being
merely decorative, the icons and images in your app play an essential role in communicating with users.
For the best results, enlist the help of a professional graphic designer. An experienced graphic designer
can help you develop an overall visual style for your app and apply that style to all the icons and images in
it.
Use universal imagery that people will easily recognize. Avoid focusing on a secondary or obscure aspect
of an element.
Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a
single object that expresses the essence of your app. Start with a basic shape and add details cautiously. If
an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at
smaller sizes.
Tips for Creating Great Artwork for the Retina Display
Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon more
colorful. Also, smooth gradients typically work better than sharp delineations of color.
安博中程在线 17/24

18. Tips for Designing Great Icons and Images
Beautiful, compelling icons and images are a fundamental part of the iOS user experience. Far from being
merely decorative, the icons and images in your app play an essential role in communicating with users.
For the best results, enlist the help of a professional graphic designer. An experienced graphic designer
can help you develop an overall visual style for your app and apply that style to all the icons and images in
it.
Use universal imagery that people will easily recognize. Avoid focusing on a secondary or obscure aspect
of an element.
Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a
single object that expresses the essence of your app. Start with a basic shape and add details cautiously. If
an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at
smaller sizes.
Tips for Creating Great Artwork for the Retina Display
Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon more
colorful. Also, smooth gradients typically work better than sharp delineations of color.
In general, avoid using “greek” text or wavy lines to suggest text. If you want to show text in your icon, but
you don’t want to draw attention to the words themselves, start with actual text and make it hard to read
by shrinking it or doubling the layers.
Don’t reuse iOS app icons in your interface. It can be confusing to users to see the same icon used to
mean slightly different things in multiple locations throughout the system.
安博中程在线 18/24

19. CSS3 的选择器

20. 奇偶行不同颜色显示
安博中程在线
传统做法是给奇偶行设置不同的css类名
使用:nth-of-type可以查找特定类型的第n个页面元素，结合even和odd关键字实现“斑马纹”效果。
·
·
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#ddd;
}
CSS
20/24

21. 除第一列外其他列文本右对齐
安博中程在线
td:nth-child(n+2){
text-align: right;
}
CSS
查找某元素的子元素，和nth-of-type一样，也可以使用关键字或者公式。
公式：an+b，a是倍数，b是偏移量。
·
·
table tr:nth-child(n+2): 除第一行外的所有行；
table tr:nth-child(2n): 每两行选择一行；
table tr:nth-child(2n+4): 用偏移量改变起始行，从第四行开始隔一行选择一行；
·
·
·
21/24

22. 最后一行加粗显示
获取一组元素中的最后一个子元素
安博中程在线
tr:last-child{
font-weight:bolder;
}
CSS
22/24

23. 倒数第二行用不同颜色显示
从最后一个元素反向查找
安博中程在线
tr:nth-last-child(2){
color:green;
}
tr:nth-last-child(-n+3)td{
text-align:right;
}
CSS
23/24

24. <Thank you!>
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad