CSS 圆角边框 详解
css3基础 2022-05-23 12:02:22小码哥的IT人生shichen
CSS 圆角边框
CSS 圆角边框
border-radius 属性用于向元素添加圆角边框：
普通边框
圆角边框
圆角边框
圆角边框
示例代码：
p {
border: 2px solid red;
border-radius: 5px;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>此属性用于为元素添加圆角：</p>
<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
更多实例
完整实例【一个声明中的所有上边框属性】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-top: thick double #ff0000;
}
</style>
</head>
<body>
<p>这是段落中的一些文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示简写属性，用于在一条声明中设置上边框的所有属性。
完整实例【设置下边框的样式】：
<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何设置下边框的样式。
完整实例【设置左边框的宽度】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-left-width: 15px;
}
</style>
</head>
<body>
<p><b>注释：</b>如果单独使用，"border-left-width" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何设置左边框的宽度。
完整实例【设置四条边框的颜色】：
<!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">一种颜色的边框！</p>
<p class="two">两种颜色的边框！</p>
<p class="three">三种颜色的边框！</p>
<p class="four">四种颜色的边框！</p>
<p><b>注释：</b>如果单独使用，"border-color" 属性不起作用。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何设置四条边框的颜色。它可以拥有一到四种颜色。
完整实例【设置右边框的颜色】：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-right-color: #ff0000;
}
</style>
</head>
<body>
<p>这是段落中的一些文本。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何设置右边框的颜色。
所有 CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，在一条声明中设置所有边框属性。 |
| border-color | 简写属性，设置四条边框的颜色。 |
| border-radius | 简写属性，可设置圆角的所有四个 border-*-radius 属性。 |
| border-style | 简写属性，设置四条边框的样式。 |
| border-width | 简写属性，设置四条边框的宽度。 |
| border-bottom | 简写属性，在一条声明中设置所有下边框属性。 |
| border-bottom-color | 设置下边框的颜色。 |
| border-bottom-style | 设置下边框的样式。 |
| border-bottom-width | 设置下边框的宽度。 |
| border-left | 简写属性，在一条声明中设置所有左边框属性。 |
| border-left-color | 设置左边框的颜色。 |
| border-left-style | 设置左边框的样式。 |
| border-left-width | 设置左边框的宽度。 |
| border-right | 简写属性，在一条声明中设置所有右边框属性。 |
| border-right-color | 设置右边框的颜色。 |
| border-right-style | 设置右边框的样式。 |
| border-right-width | 设置右边框的宽度。 |
| border-top | 简写属性，在一条声明中设置所有上边框属性。 |
| border-top-color | 设置上边框的颜色。 |
| border-top-style | 设置上边框的样式。 |
| border-top-width | 设置上边框的宽度。 |
