### CSS3属性样式
#### CSS3属性前缀的书写顺序
- -webkit-border-radius:50%; webkit 谷歌浏览器
- -moz-border-radius:50%; 火狐浏览器
- -ms-border-radius:50%; IE浏览器
- border-radius:50%; 标准写法
> 在项目中至少写两个CSS属性
- -webkit-border-radius:50%;
- border-radius:50%;
#### border-radius 圆角
- border-radius:1px; 四个方向的值
- border-radius:1px 2px; 左上右下 右上左下
- border-radius:1px 2px 3px; 左上 右上左下 右下
- border-radius:1px 2px 3px 4px; 左上 右上 右下 左下
- border-radius:50%; 一个圆(50%是这个元素的一半)
> 一般在页面中 **分页器**、**轮播图**、**按钮**的结构上
#### box-shadow 盒子阴影
> none; 无阴影
- 第一个值：水平方向的阴影，可以为负值
- 正值是在右边，负值是在左边
- 第二个值：垂直方向的阴影，可以为负值
- 正值是在下边，负值是在上边
- 第三个值：阴影的模糊度，不可以为负值
- 第四个值：阴影的尺寸（大小），可以为负值
- 第五个值：阴影的颜色(rgba/16进制)
- 第六个值：默认值为外阴影，inset内阴影
```
-webkit-box-shadow: 1px 1px 2px 3px red;
box-shadow: 1px 1px 2px 3px red;
常用写法：
box-shadow: 1px 1px 2px red;(水平、垂直、模糊度、颜色)
box-shadow: 1px 1px 2px red,-1px 1px 2px red;
```
#### text-shadow 文本阴影
> none; 无阴影
- 第一个值：水平方向的阴影，可以为负值
- 正值是在右边，负值是在左边
- 第二个值：垂直方向的阴影，可以为负值
- 正值是在下边，负值是在上边
- 第三个值：阴影的模糊度，不可以为负值
- 第四个值：阴影的颜色
```
text-shadow: 1px 1px 3px red;
```
#### box-sizing 怪异盒模型
- box-sizing:border-box; 宽高是包括border和padding值的
- box-sizing:content-box;宽高是不包括border和padding值的(写不写没区别)
```
<style>
.box {
margin: 30px auto;
width: 100px;
height: 100px;
padding:20px;
border:5px solid red;
green;
box-sizing:border-box;
/* 包括padding和border值 */
}
<div class="box"></div>
</style>
```
### 一行文本出现省略号必备的四个条件
- `width` 宽度
- `white-space: nowrap;` 强制不换行
- `overflow: hidden;` 超出隐藏
- `text-overflow: ellipsis;` 文本隐藏的方式
```
p{
width:400px;
/* 宽度 */
height: 40px;
line-height: 40px;
white-space: nowrap;
/* 强制不换行 */
overflow: hidden;
/* 超出隐藏 */
text-overflow: ellipsis;
/* ellipsis 以省略号的方式显示 */
border:1px solid red;
}
```