CSS 5.2 框模型-边框
1.边框的样式border-style(简写属性)
格式:border-style:上 右 下 左;
可能的值:
值 | 描述 |
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 | 规定应该从父元素继承边框样式。 |
例如:
①border-style:dotted(上) dashed(右) solid(下) double(左);//顺时针
②border-style:dotted(上) dashed(右 左) solid(下);
③border-style:dotted(上 下) dashed(右 左);
④border-style:dotted(上 下 右 左);
边框单边样式:
上边框:border-top-style
右边框:border-right-style
下边框:border-bottom-style
左边框:border-left-style
2.边框的宽度border-width(简写属性)
格式:border-width:上 右 下 左;
可能的值:
值 | 描述 |
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
length | 允许您自定义边框的宽度。 |
inherit | 规定应该从父元素继承边框宽度。 |
例如:
①border-width:thin(上) medium(右) thick(下) 10px(左);//顺时针
②border-width:thin(上) medium(右 左) thick(下);
③border-width:thin(上 下) medium (右 左);
④border-width:thin(上 下 右 左);
边框单边宽度:
上边框:border-top-width
右边框:border-right-width
下边框:border-bottom-width
左边框:border-left-width
3.边框的颜色border-color(简写属性)
格式:border-color:上 右 下 左;
可能的值:
值 | 描述 |
color_name | 规定颜色值为颜色名称的边框颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。 |
transparent | 默认值。边框颜色为透明。 |
inherit | 规定应该从父元素继承边框颜色。 |
例如:
①border-color:red(上) #00ff00(右) rgb(0,0,255)(下) transparent(左);//顺时针
②border-color:red(上) #00ff00(右 左) rgb(0,0,255)(下);
③border-color:red(上 下) #00ff00(右 左);
④border-color:red(上 下 右 左);
边框单边颜色:
上边框:border-top-color
右边框:border-right-color
下边框:border-bottom-color
左边框:border-left-color
4.其他简写属性:
①border声明所有边框属性,按顺序如下border-width border-style border-color
例如:border:10px solid red;
注:顺序不能错,但可以省略某个,如:border:10px;
②border-top声明所有上边框属性,
按顺序如下:border-top-width border-top-style border-top-color
例如:border-top:10px solid red;
注:顺序不能错,但可以省略某个,如:border-top:10px;
③border-right声明所有右边框属性,
按顺序如下:border-right-width border-right-style border-right-color
例如:border-right:10px solid red;
注:顺序不能错,但可以省略某个,如:border-right:10px;
④border-bottom声明所有下边框属性,
按顺序如下:border-bottom-width border-bottom-style border-bottom-color
例如:border-bottom:10px solid red;
注:顺序不能错,但可以省略某个,如:border-bottom:10px;
⑤border-left声明所有上边框属性,
按顺序如下:border-left-width border-left-style border-left-color
例如:border-left:10px solid red;
注:顺序不能错,但可以省略某个,如:border-left:10px;