9.CSS边框属性

最新推荐文章于 2024-07-13 11:50:40 发布

黑糖22

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量131

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_43966202/article/details/129800710

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.边框属性

1.CSS边框属性允许指定一个元素边框的样式和颜色。

2.边框样式

1.边框样式属性指定要显示什么样的边界。

2.border-style属性用来定义边框的样式。

<style>
p.none {border-style:none;}
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.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

3.边框宽度

1.border-width 属性为边框指定宽度。
2.“border-width” 属性如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。
3.为边框指定宽度可以指定长度值：
① 2px 或 0.1em(单位为 px, pt, cm, em 等)。
②使用 3 个关键字之一“ thick 、medium（默认值）、 thin。
【CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。】

4.边框颜色

1.border-color属性用于设置边框的颜色。
2.name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

5.边框-单独设置各边

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

①

border-style:dotted solid double dashed;

上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
②

border-style:dotted solid double;

上边框是 dotted
左、右边框是 solid
底边框是 double
③

border-style:dotted solid;

上、底边框是 dotted
右、左边框是 solid

④

border-style:dotted;

四面边框是 dotted

6.在一个属性中设置边框

1.在"border"属性中设置：border-width、border-style (required)、border-color

p
{
	border:5px solid red;
}

黑糖22

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.CSS边框属性

CSS边框属性
复制链接

扫一扫

专栏目录