您现在的位置是：亿华云 > 人工智能

一篇文章带你了解CSS 边框(Border)

亿华云2025-10-09 06:54:16【人工智能】0人已围观

简介一、CSS边框属性CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式，例如实线，双线，虚线等，[也可以是图像]，定义边框的样式(border-style)，颜色(border-color)和

一、篇文CSS边框属性

CSS边框属性允许您定义框的章带边框区域。边框可以是边框预定义的样式，例如实线，篇文双线，章带虚线等，边框[也可以是篇文图像]，定义边框的章带样式(border-style)，颜色(border-color)和厚度(border-width)。边框

1. 边框宽度属性(border-width)

border-width属性指定边框区域的篇文宽度。用于同时设置元素边框的章带所有四个边的厚度。

例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>项目</title> <style> p.one { border-style: solid; border-width: 5px; border-color: red; } p.two { border-style: solid; border-width: 5px 10px; border-color: red; } p.three { border-style: solid; border-width: 5px 10px 15px; border-color: red; } p.four { border-style: solid; border-width: medium 10px thick 15px; border-color: red; } </style> </head> <body style="background-color: aqua;"> <p class="one"> <strong>单值语法：</strong>：单个值设置所有四个边框的边框宽度。</p> <p class="two"> <strong>二值语法：</strong>第一个值设置上下边框的篇文宽度，第二个值设置左右边框的章带宽度。</p> <p class="three"> <strong>三值语法</strong>：第一个值设置顶部边框的边框宽度，第二个值设置左右边框的宽度，第三个值设置底部边框的宽度。</p> <p class="four"> <strong>四值语法</strong>：每个值都按上，右，下和左的亿华云计算顺序分别设置边框的宽度。</p> <p> <strong>注意</strong>：必须在 <code> border-width </code>属性之前声明 <code> border-style </code>属性。元素必须具有边框，然后才能设置边框的宽度。</p> </body> </html>

注：如果border-width缺少或未指定属性值，border-width则将使用的默认值(medium)。

2. 边框样式属性 (border-style)

该border-style属性设置框边框的样式。它是用于设置元素边框所有四个侧面的线型的简写速记属性。

该border-style属性可采取以下值之一：none，hidden，dashed，dotted，double，groove，inset，outset，ridge和solid 。

例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>项目</title> <style> p { border-width: 3px; } 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; } </style> </head> <body style="background-color: aqua;"> <h1>各种边框样式。</h1> <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> </body> </html>