CSS3边框、背景、文本效果、字体

CSS3边框

1. 圆角边框：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;
}

2. 边框阴影：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;
}

3. 边框图片：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背景

1. background-size：
   background-size 属性规定背景图片的尺寸。
   可以以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

div{
    background: url(bg_flower.gif);
    background-size: 63px 100px;       /*用像素规定尺寸*/
    /*background-size: 40% 100%;*/   /*用百分比规定尺寸*/
    background-repeat: no-repeat;
}

2. 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;
}

3. 多重背景图片：
   CSS3 允许为元素使用多个背景图像。

div{ 
    background-image: url(bg1.gif),url(bg2.gif);
}

---

CSS3文本效果

1. 文本阴影：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;
}

3. 文本溢出省略号：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;
}