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">
使用百分比
<style>
.gravatar img {
border-radius: 50% 50% 50% 50%;
}
</style>
<div class="gravatar">
<img src="/demo/css3/images/gravatar.jpeg">
</div>
<style>
div.shadow_box{
box-shadow: 10px 10px 5px #999;
width: 300px;
height: 100px;
background-color: yellow;
}
</style>
#round {
border-image:url(borderimage.png) 30 30 round;
}
#stretch {
border-image:url(borderimage.png) 30 30 stretch;
}
border-image 属性指定使用图片作为边框。
原图:
transform:rotate(-10deg);
-ms-transform:rotate(-10deg); /* IE 9 */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(-10deg); /* Safari and Chrome */
-o-transform:rotate(-10deg); /* Opera */
#dnd-thumbnails img: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: 0 100px;
}
div.width-effect {
width:100px;
transition: width 1s;
}
div.width-effect:hover {
width:500px;
}
@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 */
}
#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;}
}
.newspaper {
column-count:3;
column-gap:40px;
column-rule:2px outset #333;
}
主要的属性设置
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.
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.
Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.
Use transparency when it makes sense. Transparency in an image can help depict glass or plastic, but it can be tricky to use convincingly. You should not use transparency in your app icon.
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.
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.
Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.
Use transparency when it makes sense. Transparency in an image can help depict glass or plastic, but it can be tricky to use convincingly. You should not use transparency in your app icon.
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#ddd;
}
td:nth-child(n+2){
text-align: right;
}
获取一组元素中的最后一个子元素
tr:last-child{
font-weight: bolder;
}
从最后一个元素反向查找
tr:nth-last-child(2){
color: green;
}
tr:nth-last-child(-n+3) td{
text-align: right;
}