css3边框

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。

圆角边框

border-radius：属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法：border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

属性值

• length ：定义圆角的形状
• % : 以百分比定义圆角的形状

div{
    border-radius: 10px;
}
/* 等价于 */
div{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
/* ------- */
div{
    border-radius: 5px 10px;
}
/* 等价于 */
div{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
/* ------- */
div{
    border-radius: 5px 10px 15px 20px;
}
/* 等价于 */
div{
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 20px;
}

边框阴影

box-shadow：属性向框添加一个或多个阴影

语法 ： box-shadow: h-shadow v-shadow blur spread color inset

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

属性值

• h-shadow : 必需。水平阴影的位置。允许负值。指定阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧
• v-shadow : 必需。垂直阴影的位置。允许负值。设置阴影垂直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方
• blur ：可选。模糊距离。设置阴影的模糊半径，值为 0 意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0
• spread :可选。阴影的尺寸。改变阴影的大小,其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，则缩小
• color : 可选。阴影的颜色
• inset : 可选。将外部阴影 (outset) 改为内部阴影

div {
    width: 300px;
    height: 500px;
    box-shadow: 5px 10px 20px 20px red;
}

边框图片

border-image 属性是一个简写属性，用于设置以下属性:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

如果省略，会设置默认值

语法： border-image：source slice width outset repeat

属性值

• source {string} ：用在边框的图片的路径
• slice {number} ：图片边框向内偏移
• width {number} ：图片边框的宽度。
• outset {number} ：边框图像区域超出边框的量
• repeat {string} ：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

div {
    border: 5px solid transparent;
    border-image: url(../images/border.png) 27 round;
}