2021/4/27 “如何为div层添加边框?”(border属性详解)
·
解决方法:
很简单,一条语句搞定!
div {
border:1px solid #000;
}
这样我们就为div层设置了一条宽度为1px,实线,黑色的边框
当然上面的代码是以简写的方式设置边框
border
属性是以下各个边框属性的简写属性:
border-width
border-style
(必需)border-color
1.border-width 属性指定四条边框的宽度:
可以将宽度设置为特定大小(单位为px
、pt
、cm
、em
)
也可以使用以下三个预定义值之一:thin
、medium
或 thick
。
2.border-color属性指定四条边框的颜色:
可以通过以下方式设置颜色:
- name - 指定颜色名,比如 “
red
” - HEX - 指定十六进制值,比如 “
#ff0000
” - RGB - 指定 RGB 值,比如 “
rgb(255,0,0)
” - HSL - 指定 HSL 值,比如 “
hsl(0, 100%, 50%)
” transparent
3.border-style属性指定四条边框的样式:
solid
- 定义实线边框 ★★★(常用)
dotted
- 定义点线边框 ★★★
dashed
- 定义虚线边框 ★★★
double
- 定义双边框
groove
- 定义 3D 坡口边框。效果取决于 border-color 值
ridge
- 定义 3D 脊线边框。效果取决于 border-color 值
inset
- 定义 3D inset 边框。效果取决于 border-color 值
outset
- 定义 3D outset 边框。效果取决于 border-color 值
none
- 定义无边框
hidden
- 定义隐藏边框
border-width、border-style、border-color属性均可以设置4个值
,分别为四条边设置不同的宽度、样式、颜色:
例如,为4条边框分别设置不同样式:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: dashed;
}
或
p {
border-style:dotted solid double dashed;
}
注意!:当采用第二种写法为4条边框分别设置不同样式/ 颜色 /宽度 时,应用的顺序为“上、右、下、左”
,即 顺时针
应用。
更多推荐
已为社区贡献3条内容
所有评论(0)