CSS 圆角边框


目录

    显示目录


CSS 圆角边框

class="w3-codespan">border-radius 属性用于向元素添加圆角边框:

Normal border

Round border

Rounder border

Roundest border

例子

p {
  border: 2px solid red;
  border-radius: 5px;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>



更多示例

一个声明中的所有顶部边框属性

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-top: thick double #ff0000;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</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">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>

</body>
</html>

本例演示如何设置下边框的样式。

设置左边框的宽度

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-left-width: 15px;
}
</style>
</head>
<body>

<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</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">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>

本例演示如何设置四个边框的颜色。它可以有一种到四种颜色。

设置右边框的颜色

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: solid;
  border-right-color: #ff0000;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>

本例演示如何设置右边框的颜色。




所有 CSS 边框属性

border

在一个声明中设置所有边框属性

border-bottom

在一个声明中设置所有底部边框属性

border-bottom-color

设置底部边框的颜色

border-bottom-style

设置下边框的样式

border-bottom-width

设置下边框的宽度

border-color

设置四个边框的颜色

border-left

在一个声明中设置所有左边框属性

border-left-color

设置左边框的颜色

border-left-style

设置左边框的样式

border-left-width

设置左边框的宽度

border-radius

设置圆角的所有四个 border-*-radius 属性

border-right

在一个声明中设置所有正确的边框属性

border-right-color

设置右边框的颜色

border-right-style

设置右边框的样式

border-right-width

设置右边框的宽度

border-style

设置四个边框的样式

border-top

在一个声明中设置所有顶部边框属性

border-top-color

设置上边框的颜色

border-top-style

设置上边框的样式

border-top-width

设置上边框的宽度

border-width

设置四个边框的宽度