在77ISP学技术

每日笔记， 用css设置网页里的的边框 ，网页里边框设置，如何设置div的边框

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

<p class="css-border" style="border: 1px solid #000;">我的所有边都有边框。</p>

<p class="css-border" style="border-bottom: 1px solid red;">我有一条红色的下边框。</p>

<p class="css-border" style="border: 1px solid #ccc; border-radius: 16px;">我有圆角边框。</p>

<p class="css-border" style="border-left:6px solid #2196F3;background-color: #ddffff;">我有一条蓝色的左边框。</p>

输出结果如下

我的所有边都有边框。

我有一条红色的下边框。

我有圆角边框。

我有一条蓝色的左边框。

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

dotted-定义点线边框

dashed-定义虚线边框

solid - 定义实线边框

double - 定义双边框

groove - 定义 3D 坡口边框。效果取决于 border-color 值

ridge - 定义 3D 脊线边框。效果取决于 border-color 值

inset - 定义 3D inset 边框。效果取决于 border-color 值

outset - 定义 3D outset 边框。效果取决于 border-color 值

none - 定义无边框

hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

以下为实例输出

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。其效果取决于 border-color 的值。

垄状边框。其效果取决于 border-color 的值。

3D inset 边框。其效果取决于 border-color 的值。

3D outset 边框。其效果取决于 border-color 的值。

无边框。

隐藏边框。

混合边框。

注意：除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！