CSS border边框属性的用法（非常详细）

在 CSS 中，当元素四个方向的边框样式相同时，可以使用 border 属性设置，其格式为：

border:<宽度> <线条类型> <颜色>;

其中，<宽度>和<颜色>比较好理解，而<线条类型>可以使用多种样式，下面的代码演示了各种线条的显示效果。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{margin:1em;}
</style>
</head>
<body>
<div style="border-style:solid;">solid</div>
<div style="border-style:dotted;">dotted</div>
<div style="border-style:dashed;">dashed</div>
<div style="border-style:double;">double</div>
<div style="border-style:groove;">groove</div>
<div style="border-style:ridge;">ridge</div>
<div style="border-style:inset;">inset</div>
<div style="border-style:outset;">outset</div>
</body>
</html>

页面显示效果见下图：

如果需要设置边框四个方向的宽度、线条类型或颜色，可以使用如下属性：

border-width属性，设置线条宽度，如 1 像素等；
border-style属性，设置线条类型，可以使用 solid、dotted、dashed、double、groove、ridge、inset、outset 等关键字，显示效果可参考图 1；
border-color属性，设置线条颜色，如 black、rgb(0,0,0) 都是黑色。

分别设置四个方向的线条样式时，可以使用相应的一组属性，如上边框的属性就可以使用：

border-top 属性，同时设置上边框的宽度、线条类型和颜色；
border-top-width 属性，设置上边框的宽度；
border-top-style 属性，设置上边框的线条类型；
border-top-color 属性，设置上边框的颜色。

其他三个方向边框的设置可以参考以上属性，将 top 关键字替换为相应的 right、bottom 或 left 即可。

除了设置边框的宽度、线条类型和颜色，还可以设置边框四个角为圆角。同时设置四个圆角的半径尺寸，可以使用 border-radius 属性，设置方式主要包括：

四个参数，分别设置左上角、右上角、右下角、左下角的圆角半径。
三个参数，分别设置左上角、右上角、右下角的圆角半径，左下角与右上角圆角半径相同。
两个参数，分别设置左上角、右上角的圆角半径，右下角与左上角相同，左下角与右上角相同，即对角使用相同数据。
一个参数，同时设置四个角的圆角半径。

下面的代码演示了几种圆角的设置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    display: inline-block;
    margin: 1em;
    width: 100px;
    height: 100px;
    border: 2px solid black;
}
#div1 {border-radius: 30px;}
#div2 {border-radius: 30px 60px;}
#div3 {border-radius: 50%;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

页面显示效果见下图：

本例中，首先定义了 div 元素的基本样式：

div1 元素的 border-radius 属性使用一个属性值，四个圆角半径都定义为 30 像素，如果基本图形是长方形，则可以生成一个圆角按钮的图形；
div2 元素使用两个属性值指定了左上角和右上角的圆角半径，实际显示效果是，对角的圆角半径是相同的；
div3 元素使用一个参数，这里使用了一个小技巧，即元素宽度和高度相同，且四个圆角都设置为元素宽度的一半（50%）或更大时，就可以显示为一个圆形。

下面的代码可以创建一个胶囊按钮：

.button1 {padding:0.5em 2em;border-radius:2em;}

页面显示效果见下图：

胶囊按钮的样式设置，关键在于边框圆角的半径应该使用数值设置，实际尺寸要大于或等于按钮高度的 50%。

此外，分别设置四个圆角的半径时，可以使用如下属性：

border-top-left-radius 属性，设置左上角圆角半径；
border-top-right-radius 属性，设置右上角圆角半径；
border-bottom-right-radius 属性，设置右下角圆角半径；
border-bottom-left-radius 属性，设置左下角圆角半径。

CSS border边框属性的用法（非常详细）

相关文章