border-style CSS 属性是一个速记属性,用于设置元素边框所有四个边的线条样式。
注意: border-style 属性一次可以取一到四个值。
语法:
border-style: value;
属性值
Value | Effect | ||
---|---|---|---|
none | No border is created and it is left plain | ||
hidden | Just like None it doesnt show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value. | ||
dotted | A series of dots are displayed in a line as the border. | ||
solid | A single solid and bold line is used as a border. | ||
dashed | A series of square dashed lines are used as border. | ||
double | Two lines placed parallel to each other act as the border. | ||
groove | Displays a 3D grooved border, it’s effect depends on border-color value. | ||
ridge | Displays a 3D ridged border, it’s effect depends on border-color value. | ||
inset | Displays a 3D inset border, it’s effect depends on border-color value. | outset | Displays a 3D outset border, it’s effect depends on border-color value. |
边框样式:无虚线实线;
- 上边框无(无边框)
- 右边框是虚线
- 底部边框是实心的
- 左边框是虚线
边框样式:虚线;
- 上边框和下边框是虚线
- 右边框和左边框是虚线
边框样式:实心;
- 所有边框都是实心的
下面的程序说明了边框样式属性:
程序 1:对所有边框仅使用一个值。
Dotted Borders
GeeksforGeeks
输出:
程序 2:为边框使用多个值。
Dotted Borders
GeeksforGeeks
输出:
支持的浏览器: border-style 属性支持的浏览器
下面列出:
- 铬 1.0
- 边缘 4.0
- 火狐 1.0
- Safari 1.0
- 歌剧 3.5