css border-style属性
时间: 2023-10-11 20:11:16 浏览: 51
CSS border-style属性用于设置元素边框的样式。
语法:
```
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
```
属性值:
- none:没有边框
- hidden:与none相同,但是如果设置了border-width,则会产生一个不可见的边框
- dotted:点状边框
- dashed:虚线边框
- solid:实线边框
- double:双线边框,两条实线之间有一条空白线
- groove:3D凹槽边框,看起来像是在元素上凿出了一个凹槽
- ridge:3D脊边框,看起来像是在元素上凸起了一条脊
- inset:3D内嵌边框,看起来像是元素内部嵌入了一条边框
- outset:3D外嵌边框,看起来像是元素外部有一条凸起的边框
- initial:将边框样式设置为默认值
- inherit:继承父元素的边框样式
示例:
```css
div {
border-style: solid; /* 实线边框 */
border-width: 2px; /* 边框宽度 */
border-color: red; /* 边框颜色 */
}
```
效果:
![border-style](https://cdn.jsdelivr.net/gh/1071942338/pictures/Typora_Images/20210826224403.png)
相关问题
css中border width属性,CSSborder-width属性使用教程
CSS中的border-width属性用于设置元素的边框宽度。语法如下:
```
border-width: top right bottom left;
```
其中,可选值包括: thin、medium、thick、长度值(如:1px、2rem、3em等)。
如果只指定一个值,则四个边框的宽度均为该值;如果指定两个值,则第一个值代表上下边框的宽度,第二个值代表左右边框的宽度;如果指定三个值,则第一个值代表上边框的宽度,第二个值代表左右边框的宽度,第三个值代表下边框的宽度;如果指定四个值,则分别代表上、右、下、左边框的宽度。
举个例子:
```
border-width: 1px; /* 四个边框的宽度均为1像素 */
border-width: 2px 1px; /* 上下边框的宽度为2像素,左右边框的宽度为1像素 */
border-width: 3px 2px 1px; /* 上边框的宽度为3像素,左右边框的宽度为2像素,下边框的宽度为1像素 */
border-width: 4px 3px 2px 1px; /* 上边框的宽度为4像素,右边框的宽度为3像素,下边框的宽度为2像素,左边框的宽度为1像素 */
```
注意,当元素的display属性值为inline时,border-width的top和bottom值无效。当元素的display属性值为table时,border-width的left和right值无效。此外,如果元素的border-style属性值为none或hidden,则border-width属性值无效。
border-style 边框风格属性
border-style 是 CSS 的一个边框风格属性,用于设置 HTML 元素的边框样式。它可以接受一个或多个值,每个值对应一个边框线。常见的值包括:
- none:无边框;
- solid:实线边框;
- dashed:虚线边框;
- dotted:点线边框;
- double:双线边框;
- groove:3D 凹槽边框;
- ridge:3D 垄状边框;
- inset:3D 凹陷边框;
- outset:3D 凸起边框。
例如,border-style: solid dashed dotted double; 表示元素顶部边框为实线,右侧边框为虚线,底部边框为点线,左侧边框为双线。如果只设置一个值,表示所有边框的样式都相同。