CSS 简写边框属性 详解
css3基础 2022-05-23 12:02:19小码哥的IT人生shichen
CSS 简写边框属性
CSS Border - 简写属性
就像您在上一章中所见，处理边框时要考虑许多属性。
为了缩减代码，也可以在一个属性中指定所有单独的边框属性。
border 属性是以下各个边框属性的简写属性：
border-widthborder-style（必需）border-color
示例代码：
p {
border: 5px solid red;
}
结果：
一些文本
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h1>border 属性</h1>
<p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您还可以只为一个边指定所有单个边框属性：
左边框
p {
border-left: 6px solid red;
background-color: lightgrey;
}
结果：
一些文本
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h1>border-left 属性</h1>
<p>此属性是 border-left-width、border-left-style 以及 border-left-color 的简写属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下边框
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
结果：
一些文本
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h1>border-bottom 属性</h1>
<p>此属性是 border-bottom-width、border-bottom-style 以及 border-bottom-color 的简写属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
