在网页中，边框随处可见，任何块元素和行内元素都可以设置边框属性。例如，div元素可以设置边框，img元素也可以设置边框，table元素也可以设置边框，span元素同样也可以设置边框等等。下面向大家介绍边框border的相关知识：
css border分为：
- border-width
- border-style
- border-color
border-width
border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:solid;
border-width:medium;
}
p.three{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class=\"one\">Some text.</p>
<p class=\"two\">Some text.</p>
<p class=\"three\">Some text.</p>
<p><b>Note:</b> The \"border-width\" property does not work if it is used alone. Use the \"border-style\" property to set the borders first.</p>
</body>
</html>
<##ads_in_article_manong##>
border-style
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
实例：
<!DOCTYPE html>
<html>
<head>
<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;}
</style>
</head>
<body>
<p class=\"none\">No border.</p>
<p class=\"dotted\">A dotted border.</p>
<p class=\"dashed\">A dashed border.</p>
<p class=\"solid\">A solid border.</p>
<p class=\"double\">A double border.</p>
<p class=\"groove\">A groove border.</p>
<p class=\"ridge\">A ridge border.</p>
<p class=\"inset\">An inset border.</p>
<p class=\"outset\">An outset border.</p>
<p class=\"hidden\">A hidden border.</p>
</body>
</html>
border-color
border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class=\"one\">One-colored border!</p>
<p class=\"two\">Two-colored border!</p>
<p class=\"three\">Three-colored border!</p>
<p class=\"four\">Four-colored border!</p>
<p><b>Note:</b> The \"border-color\" property does not work if it is used alone. Use the \"border-style\" property to set the borders first.</p>
</body>
</html>
继续阅读与本文标签相同的文章
上一篇 :
十年前的互联网，充满着简单与土味
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目： 教程
-
5G套餐曝光遭“吐槽”，iphone11受追捧，导致苹果11销量比较高
2026-05-14栏目： 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾？
2026-05-14栏目： 教程
-
当水乡建筑遇上机器人，成就乌镇又一网红景点
2026-05-14栏目： 教程
-
惊险！手刹失灵，郴州一货车开启“无人驾驶”模式……
2026-05-14栏目： 教程