码农教程 - 一技在手,衣食无忧! tools

目录

CSS 圆角边框

❮ 上一节 下一节 ❯

CSS 圆角边框

这个border-radius属性用于向元素添加圆角边框：

正常边框

圆形边框

更圆的边框

最圆的边框

示例

p {
  border: 2px solid red;
  border-radius: 5px;
}
亲自试一试 »

更多示例

一个声明中的所有顶部边框属性
此示例演示了一种简写属性，用于在一个声明中设置上边框的所有属性。

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

设置左边框的宽度
本例演示如何设置左边框的宽度。

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

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

通过练习测试一下

练习:

使用 border 简写属性为 <p> 元素设置 "4px"、"dotted"、"red" 边框。

<style>
p {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

所有 CSS 边框属性

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ 上一节 下一节 ❯