1:CSS3 圆角边框
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
2:CSS3 边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值
blur可选。模糊距离。
spread可选。阴影的尺寸。
color*可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴影。
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
3:CSS3 边框图片
Internet Explorer 不支持 border-image 属性。
round （图片铺满整个边框）
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox /
-webkit-border-image:url(/i/border.png) 30 30 round; / Safari and Chrome /
-o-border-image:url(/i/border.png) 30 30 round; / Opera */
border-image:url(/i/border.png) 30 30 round;
}
stretch （ 图片被拉伸以填充该区域。）
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox /
-webkit-border-image:url(/i/border.png) 30 30 stretch; / Safari and Chrome /
-o-border-image:url(/i/border.png) 30 30 stretch; / Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
值 描述 测试
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
4:CSS3 背景
background-size: length|percentage|cover|contain;
background-size 属性规定背景图片的尺寸。
| 值 | 描述 | 测试 |
| length |
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
4:CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
border:1px solid black;
padding:35px;
background-image:url('/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
div1
{
background-origin:border-box;
}
div2
{
background-origin:content-box;
}
5:CSS3 多重背景图片
设置两个图片互相叠加
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
| 属性 | 描述 | CSS |
| [background-clip| 规定背景的绘制区域。
| [background-origin] 规定背景图片的定位区域。
| [background-size] | 规定背景图片的尺寸。 |
6:CSS3 文本效果
语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
text-shadow 可向文本应用阴影。
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
7:CSS3 自动换行
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
8:CSS3 字体
CSS3 @font-face 规则
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
