CSS3边框
- 圆角边框：border-radius
div{
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 1em;
border-bottom-right-radius: 5%;
border-bottom-left-radius: 5px;
}
- 边框阴影：box-shadow
语法：box-shadow: h-shadow v-shadow blur spread color inset;
| 值 |
用法 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值。 |
| blur |
可选。模糊距离。 |
| spread |
可选。阴影的尺寸。 |
| color |
可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
div{
box-shadow: 10px 10px 5px #888888;
}
- 边框图片：border-image
| 值 |
描述 |
| border-image-source |
用在边框的图片的路径。 |
| border-image-slice |
图片边框向内偏移。 |
| border-image-width |
图片边框的宽度。 |
| border-image-outset |
边框图像区域超出边框的量。 |
| border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
div{
-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;
}
CSS3背景
- background-size：
background-size 属性规定背景图片的尺寸。
可以以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
div{
background: url(bg_flower.gif);
background-size: 63px 100px; /*用像素规定尺寸*/
/*background-size: 40% 100%;*/ /*用百分比规定尺寸*/
background-repeat: no-repeat;
}
-
background-origin：
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div{
background: url(bg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
- 多重背景图片：
CSS3 允许为元素使用多个背景图像。
div{
background-image: url(bg1.gif),url(bg2.gif);
}
CSS3文本效果
- 文本阴影：text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
| 值 |
描述 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值。 |
| blur |
可选。模糊的距离。 |
| color |
可选。阴影的颜色。 |
h1{
text-shadow: 5px 5px 5px #FF0000;
}
2.自动换行：word-warp
语法：word-wrap: normal | break-word;
word-wrap 属性允许长单词或 URL 地址换行到下一行。
p {
word-wrap:break-word;
}
- 文本溢出省略号：text-overflow
语法：text-overflow: clip | ellipsis | string;
| 值 |
描述 |
| clip |
修剪文本。 |
| ellipsis |
显示省略符号来代表被修剪的文本。 |
| string |
使用给定的字符串来代表被修剪的文本。 |
/*单行文本*/
div{
border: 1px solid #000000;
width: 100px;
white-space: nowrap; /*规定段落中的文本不进行换行*/
overflow: hidden;
text-overflow: ellipsis;
}
/*多行文本*/
div{
border: 1px solid #000000;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数,是一个不规范的属性，没有出现在 CSS 规范草案中*/
}
CSS3字体
在 CSS3 @font-face 规则中定义“自己的”字体。
必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
