css3新增属性
- 边框属性
- 背景属性
- 文字属性
- 颜色属性
边框属性
| 属性 | 说明 |
|
border-radius |
设置边框圆角 |
|
border-image |
设置图像边框 |
|
border-shadow |
设置边框阴影 |
1. border-radius
border-radius属性用于创建边框圆角，默认值为none单位：
px、%
分样式写法：
- border-top-left-radius：单独设置左上角圆角
- border-top-right-radius：单独设置右上角圆角
- border-bottom-left-radius：单独设置左下角圆角
- border-bottom-right-radius：单独设置右下角圆角
复合属性写法：
- 一个值：同时设置四个角，且四个角都相同
- 两个值：第一个值左上角和右下角，第二个值右上角和左下角
- 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
- 四个值：分别对应左上角、右上角、右下角、左下角
例：
div{
background-color: pink;
width: 300px;
height: 300px;
border-radius: 20px;/* 一个值 */
border-radius: 20px 60px; /* 两个值 */
border-radius: 10px 30px 50px; /* 三个值 */
border-radius: 10px 20px 30px 40px;/* 四个值 */
}
注意：当盒子宽高相同时，设置border-radius:50%是圆形；当宽高不等则是椭圆形
2. border-image
border-image属性用于设置图像边框
语法：
border-image: source slice width outset repeat;
- border-image-source：指定绘制边框的图像位置
- border-image-slice：图像边界向内偏移
- border-image-width：图像边界宽度
- border-image-outset：指定在边框外部绘制 border-image-area 的量
- border-image-repeat：用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded），默认值：stretch
例：
div{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
/* 复合样式 */
border-image:url(border.png) 30 30 round;
/* 分样式 */
border-image-source: url(border.png);/* 指定要使用的图像 */
border-image-slice: 50% 50%;/* 指定图像的边界向内偏移 */
border-image-width: 1;/* 指定图像边界的宽度，默认值1 */
border-image-outset: 30 30;/* 没有单位 */
border-image-repeat: repeat;/* 设置平铺repeat，默认拉伸stretch */
}
3. box-shadow
box-shadow属性用于设置盒子阴影，默认值none
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：设置水平阴影的位置（允许负值）*
- v-shadow：设置垂直阴影的位置（允许负值）*
- blur：阴影模糊距离
- spread：阴影大小
- color：阴影颜色
- inset： 设置内侧阴影
例：
div{
width: 200px;
height: 200px;
background-color: #eee;
box-shadow: ;
box-shadow: 0px 0px 10px 1px red inset;
}
