CSS border 属性（边框属性）
CSS border 属性（边框属性）
缩写边框属性设置在一个声明中所有的边框属性。
可以设置的属性分别（按顺序）：border-width, border-style,和border-color.
如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。
例如：
border:5px solid red;（宽度、样式、颜色）
| 值 | 说明 |
|---|---|
| border-width | 指定边框的宽度 |
| border-style | 指定边框的样式 |
| border-color | 指定边框的颜色 |
| inherit | 指定应该从父元素继承border属性值 |
CSS border-width 属性（宽度）
属性定义及使用说明
border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值（上、右、下、左）。
注意: "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。
例如：
{
border-style:solid;
border-width:5px;
}
实例:
border-width:thin medium thick 10px;
- 上边框是细边框
- 右边框是中等边框
- 下边框是粗边框
- 左边框是 10px 宽的边框
border-width:thin medium thick;
- 上边框是细边框
- 右边框和左边框是中等边框
- 下边框是粗边框
border-width:thin medium;
- 上边框和下边框是细边框
- 右边框和左边框是中等边框
border-width:thin;
- 所有4个边框都是细边框
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
CSS border-style 属性（样式）
属性定义及使用说明
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值（上、右、下、左）。
无边框 {border-style:none;}
点状-虚线边框 {border-style:dotted;}
线状-虚线边框 {border-style:dashed;}
实线边框 {border-style:solid;}
双边框 {border-style:double;}
凹槽边框 {border-style:groove;}
垄状边框 {border-style:ridge;}
嵌入边框 {border-style:inset;}
外凸边框 {border-style:outset;}
隐藏边框 {border-style:hidden;}
实例:
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
border-style:dotted;
- 所有4个边框都是点状
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
CSS border-color 属性（颜色）
属性定义及使用说明
border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值（上、右、下、左）。
实例:
border-color:红，绿，蓝,粉红色; （上、右、下、左）
- 上边框是红色
- 右边框是绿色
- 底部边框是蓝
- 左边框是粉红色
border-color：红，绿，蓝;（上、左右、下）
- 上边框是红色
- 左，右边框是绿色
- 底部边框是蓝
border-color：红，绿;（上下、左右）
- 顶部和底部边框是红色
- 左右边框是绿色
border-color：红色;（上下左右）
- 所有四个边框是红色
注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
例如：
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
| 值 | 说明 |
|---|---|
| color | 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
| inherit | 指定边框的颜色，应该从父元素继承 |
CSS border-bottom 属性（底部边框）
border-bottom缩写属性设置一个声明中所有底部边框属性。
可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color.
如果上述值缺少一个没有关系，例如border-bottom：＃FF0000;是允许的
{
border-style:solid;
border-bottom:thick dotted #ff0000; （宽度、样式、颜色）
}
| 值 | 描述 |
|---|---|
| border-bottom-width | 指定底部边框宽度 |
| border-bottom-style | 指定底部边框样式 |
| border-bottom-color | 指定底部边框颜色 |
| inherit | 指定border-bottom 属性值，应该从父元素继承 |
CSS border-bottom-width 属性（底部边框宽度）
border-bottom-width属性设置元素的底部边框宽度。
注意务必先声明border-style属性才可以设置border-bottom-width属性。元素必须有边框，你才可以改变宽度。
CSS border-bottom-style 属性（底部边框样式）
border-bottom-style属性设置元素底部边框样式。
CSS border-bottom-color 属性（底部边框颜色）
border-bottom-color属性设置元素的底部边框颜色。
注意 使用border-bottom颜色属性前，必须先声明border样式属性。元素必须有边框，你才可以改变颜色。
CSS border-left 属性（左边边框）
border-left 简写属性把左边框的所有属性设置到一个声明中。
可以按顺序设置如下属性： border-left-width, border-left-style, and border-left-color.
如果不设置其中的某个值，也不会出问题，比如 border-left:solid #ff0000; 也是允许的。
| 值 | 描述 |
|---|---|
| border-left-width | 规定左边框的宽度。参阅：border-left-width 中可能的值。 |
| border-left-style | 规定左边框的样式。参阅：border-left-style 中可能的值。 |
| border-left-color | 规定左边框的颜色。参阅：border-left-color 中可能的值。 |
| inherit | 规定应该从父元素继承 border-left 属性的设置。 |
CSS border-left-width 属性（左边边框宽度）
border-left-width 属性设置元素的左边框的宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
注意:请始终在 border-left-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。
CSS border-left-style 属性（左边边框样式）
border-left-style 设置元素左边框的样式。
CSS border-left-color 属性（左边边框颜色）
border-left-color属性设置一个元素的左边框颜色。
注意 请始终把border-style属性声明到border-color属性之前。元素必须在您改变其颜色之前获得边框。
CSS border-right 属性（右边边框）
border-left 简写属性把右边框的所有属性设置到一个声明中。
可以按顺序设置如下属性： border-right-width, border-right-style, and border-right-color.
如果不设置其中的某个值，也不会出问题，比如 border-right:solid #ff0000; 也是允许的。
CSS border-right-width 属性（右边边框宽度）
border-right-width属性设置一个元素右边框的宽度。
注意 请始终在 border-right-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。
CSS border-right-style 属性（右边边框样式）
border-right-style属性设置元素右边框的样式。
CSS border-right-color 属性（右边边框颜色）
border-right-color属性设置一个元素的的右边框的颜色。
注意 请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
{
border-style:solid;
border-right-color:#ff0000;
}
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的边框颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认值。边框颜色为透明。 |
| inherit | 规定应该从父元素继承边框颜色。 |
CSS border-top 属性（顶部边框）
border-top 简写属性把上边框的所有属性设置到一个声明中
可以按顺序设置如下属性： border-top-width, border-top-style, and border-top-color.
如果不设置其中的某个值，也不会出问题，比如 border-top:solid #ff0000; 也是允许的。
| 值 | 描述 |
|---|---|
| border-top-width | 规定上边框的宽度。参阅：border-top-width 中可能的值。 |
| border-top-style | 规定上边框的样式。参阅：border-top-style 中可能的值。 |
| border-top-color | 规定上边框的颜色。参阅：border-top-color 中可能的值。 |
| inherit | 规定应该从父元素继承 border-top 属性的设置。 |
CSS border-top-width 属性（顶部边框宽度）
border-top-width属性设置一个元素的顶部边框的宽度。
注意:请始终在 border-top-width 属性之前声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。
{
border-style:solid;
border-top-width:15px;
}
CSS border-top-style 属性（顶部边框样式）
border-top-style属性设置一个元素的顶部边框样式。
{
border-style:solid;
border-top-style:dotted;
}
CSS border-top-color 属性（顶部边框颜色）
border-top-color 设置元素的上边框的颜色。
注意：请始终把border-style属性声明到border-top-color属性之前。元素必须在您改变其颜色之前获得边框。
{
border-style:solid;
border-top-color:#ff0000；
}
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的边框颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认值。边框颜色为透明。 |
| inherit | 规定应该从父元素继承边框颜色。 |
边框属性表
| 属性 | 描述 | CSS |
|---|---|---|
| border | 复合属性。设置对象边框的特性。 | 1 |
| border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
| border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 |
| border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
| border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
| border-color | 置或检索对象的边框颜色。 | 1 |
| border-left | 复合属性。设置对象左边边框的特性。 | 1 |
| border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
| border-left-style | 设置或检索对象的左边边框样式。 | 1 |
| border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
| border-right | 复合属性。设置对象右边边框的特性。 | 1 |
| border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
| border-right-style | 设置或检索对象的右边边框样式。 | 1 |
| border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
| border-style | 设置或检索对象的边框样式。 | 1 |
| border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
| border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
| border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
| border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
| border-width | 设置或检索对象的边框宽度。 | 1 |
CSS3 border-radius 属性(圆角边框)
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
提示： 这个属性允许你为元素添加圆角边框！
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
border-radius:25px 15px 15px 15px; （左上角，右上角，右下角，左下角）
border-radius:25px 15px 15px ;（左上角，右上角右下角，左下角）
border-radius:25px 15px; （左上角左下角，右上角右下角）对角相同
| 值 | 说明 |
|---|---|
| length（长度） | 定义右下角的形状。(em/px) |
| % | 使用%定义右下角的形状。 |
例子：下面两种样式是等同的
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:等价于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
border-radius 属性的四种类型
| border-bottom-left-radius | 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-top-left-radius | 定义左上角边框的形状。 | 3 |
| border-top-right-radius | 定义右上角边框的形状。 | 3 |
CSS3 border-bottom-left-radius 属性
border-bottom-left-radius 属性定义左下角边框的形状。
提示: 这个属性允许你添加元素的圆角边框！
{
border:2px solid;
border-bottom-left-radius:2em;
}
》》》》》注：1em等于多少像素（普遍是1em=16px）
注意：border-right-radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。
| 值 | 说明 |
|---|---|
| length（长度） | 定义右下角的形状。(em/px) |
| % | 使用%定义右下角的形状。 |
CSS3 border-bottom-right-radius 属性
border-right-radius属性定义右下角边框的形状。
提示: 这个属性允许你添加元素的圆角边框！
注意： border-right-radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制。如果任一长度为零，角落里是方的，不圆润。水平半径的百分比是指边界框的宽度，而垂直半径的百分比是指边界框的高度。
CSS3 border-top-left-radius 属性
border-top-left-radius属性定义了左上角的边框形状。
提示: 这个属性允许你为元素添加圆角边框！
CSS3 border-top-right-radius 属性
border-top-right-radius属性定义了右上角的边框形状。
提示: 这个属性允许你为元素添加圆角边框！
例子：
{
border:2px solid;
padding:10px;
background:#dddddd;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
}
》》》》》注：1em等于多少像素
CSS3 border-image 属性（边框图像属性）
border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。
省略的值设置为它们的默认值。
语法：
border-image: source slice width outset repeat|initial|inherit;（图像，）
border-image: url(border.png) 30 round;
提示: 使用border-image-*属性来构建美丽的可扩展按钮！
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
CSS3 border-image-source 属性
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。
提示: 如果值是"none"，或者，如果无法显示图像，边框样式会被使用。
{
border-image-source: url(border.png);
}
| 值 | 说明 |
|---|---|
| none | 没有图像被使用 |
| image | 边框使用图像的路径 |
CSS3 border-image-slice 属性
border-image -slice属性指定图像的边界向内偏移。
语法：
border-image-slice: number|%|fill;
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
注意: 此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
| 值 | 说明 |
|---|---|
| number | 数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像） |
| % | 百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度 |
| fill | 保留图像的中间部分 |
注：border-image 切割 image 的参数的具体意义，解析如下图：
根据图示，切割完 border 的背景切片后，并且也已经设置了 border 的宽度（重要）。将相应的切片填充到 border 的相应位置。
需要注意的是：不论 border 的宽度设置的多大，后面切割的参数都是根据 border-image 引入图片的尺寸设置的参数, 或者说是根据引入图片大小设置的切割参数。
切割后的四周的八个切片，四个角根据 border 设置的大小全尺寸自动缩放显示到 border 对应的四个角。
除四个角外的其他中间切片（上中，右中间，下中，左中间），可以根据设置做拉伸或重复的设置操作显示到对应的 border 位置。
CSS3 border-image-width 属性
border-image -width属性指定图像边界的宽度。
语法：
border-image-width: number|%|auto;
{
border-image-source: url(border.png);
border-image-width: 30 30; }
注意： border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。
| 值 | 说明 |
|---|---|
| number | 表示相应的border-width 的倍数 |
| % | 边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积 |
| auto | 如果指定了，宽度是相应的image slice的内在宽度或高度 |
CSS3 border-image-outset 属性
border-image-outset用于指定在边框外部绘制 border-image-area 的量
语法：
border-image-outset: length|number;
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}
注意： border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。
| 值 | 描述 | 1 |
|---|---|---|
| length | 设置边框图像与边框（border-image）的距离，默认为0。 | 1 |
| number | 代表相应的 border-width 的倍数 | 1 |
border-image-outset:5px 5px 10px 10px ; （上、右、下、左）
border-image-outset:0 0 1 1;
CSS3 border-image-repeat 属性（延展和铺排）
border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）。
{
border-image-source: url(border.png);
border-image-repeat: repeat;
}
提示:你可以查看 border-image 属性 (简写属性用于设置所有 border-image-* 属性)。
CSS 语法：
border-image-repeat: stretch|repeat|round|initial|inherit;
注意： 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。
| 值 | 描述 | 1 |
|---|---|---|
| stretch | 默认值。拉伸图像来填充区域1 | 拉伸 |
| repeat | 平铺（repeated）图像来填充区域。 | 平铺 |
| round | 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 | 1 |
| space | 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围 | 1 |
| initial | 将此属性设置为默认值。查看 initial1 | |
| inherit | 从父元素中继承该属性。 查看 inherit |
border-image 属性用于指定一个元素的边框图像。
在这里，图像平铺（重复），以填补该地区。
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round ;
}
在这里，图像被拉伸以填补该地区
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
CSS3 box-shadow 属性（添加阴影）
box-shadow属性可以设置一个或多个下拉阴影的框。
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 2px 2px 8px 1px #888888;
box-shadow: -1px 1px 6px 1px #888888;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
CSS3 box-shadow 属性（添加阴影）
共有 0 条评论