1200字范文 > CSS盒模型-4.3边框-border-style border-width border-color --复合属性--border-top right bottom left

CSS盒模型-4.3边框-border-style border-width border-color --复合属性--border-top right bottom left

时间：2022-07-19 16:09:16

1.边框

围绕元素内容和边距的一条边线

使用属性border代表边框

我们可以使用边框属性精确控制这条线的样式、宽度、颜色。

2.边框样式

使用border-style设置边框的样式属性

一般我们简写 border: 1px solid red;

还可分别设置上下左右四条边框的样式属性

默认值为none，表示无边框

还可以设置多种样式，分别为dotted（点状）、dasheed（虚线）、solid（实线，最常用）、double（双边线）、groove、ridge、inset、outset

3.边框宽度

使用border-width设置边框的宽度属性

和边框样式一样，还可以分别设置上下左右四条边框的宽度

不常使用 3 种标准边框：thin、dium、thick（加粗了）

最常使用长度值作为宽度属性的属性值

4.边框颜色

使用border-color设置边框的颜色

还可分别设置上下左右四条边框的颜色

和背景颜色属性一样，可以直接设置颜色名、十六进制颜色值或rgb函数值

5.复合属性（即理解为：可以使用多个属性去设置上边框）

复合是指一次使用多种样式定义边框

可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性，属性值是样式、宽度和颜色，其中宽度和颜色可以省略，样式不能省略

还可以直接使用border属性，一次性对四条边框同时设置，属性值同样是样式、宽度和颜色，其中宽度和颜色可以省略，样式不能省略

例如：

.box { border-style :solid ;}

.box1{ border-width :5px ;}

.box2{ border-color :red ;}

.box3{ border-top :1px dashed #00ff00 ;}

.box4{ border :1px dotted #0000ff ;}

【自己总结：边框设置灵活随意，以下写法都是可以的】

【/* border:double;/

/border :1px dotted #0000ff ;/

/border-width: 10px;/

/border-width: 10px 20px ;/

/上dashed 右solid 下double 左！solid/

/border-style: dashed solid double;/

/border-bottom-width: 5px;

border-bottom-style: solid;

border-bottom-color: darkorange; */

border-bottom: 5px double #5d6be9;】

小例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>边框</title><style>.box {border-style: dashed;border-width: 10px;border-color: aqua;}.box2 {/* 复合属性 *//* border-bottom: 5px solid red; 指定一条下边框*/border: 10px dashed #0000ff;/*同时设置四条边框*/}</style></head><body><div class="box">华为云在线教育</div><div class="box2">华为云在线教育</div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。