目标:把CSS3的属性过一遍。教程使用W3Cschool。
CSS边框
圆角边框
border-radius:25px
阴影
box-shadow:h-shadow v-shadow blur spread color inset
边框图片(图片路径,向内偏移量,宽度,超出边框的量,(平铺repeated,铺满rounded或拉伸stretched))
border-image:url(border.png) 30 30 round
注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
CSS背景
background-size属性规定背景图片的尺寸。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
background-origin 属性规定背景图片的定位区域
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
多重背景图片
background-image:url(bg_flower.gif),url(bg_flower_2.gif)
文字效果
文本阴影效果
text-shadow: 5px 5px 5px #FF0000
文本自动换行
word-wrap:break-word
CSS3字体
可以将字体放在web服务器上,需要时自动下载
使用@font-face定义,粗体需要额外定义
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}