css border属性的使用方法和技巧

CSS Border属性的使用方法和技巧

Border是什么

Border用于设置HTML元素的边框。Border由一个或多个值组成，分别设置边框的宽度、样式和颜色。可以通过CSS的Border属性来设置边框。

Border属性语法

CSS的Border属性语法如下：

border: border-width border-style border-color;

其中：

• border-width：边框宽度（默认值是medium）
• border-style：边框样式（默认值是none）
• border-color：边框颜色（默认值是黑色）

可以单独设置每个值，如下：

border-width: 1px;
border-style: solid;
border-color: #000000;

Border的取值

Border属性的值有很多种可能，以下是常用的取值：

• Solid：实线
• Dotted：点状线
• Dashed：虚线
• Double：双线
• Groove：凹槽
• Ridge：山脊
• Inset：内嵌
• Outset：外凸

Border的使用技巧

单独设置四个边框的样式

可以使用border-top、border-right、border-bottom和border-left来单独设置每个边框的样式：

border-top: 2px dashed #000000;
border-right: 1px solid #333333;
border-bottom: 3px solid #666666;
border-left: 4px dotted #999999;

同时设置四个边框的样式

如果四个边框的样式一致，可以使用border的简写方式来设置：

border: 1px solid #000000;

示例说明

示例一

如果要设置一个按钮的边框，可以使用如下CSS代码：

.button {
  border: 1px solid #666666;
  border-radius: 3px;
  padding: 5px 10px;
  background-color: #CCCCCC;
  color: #333333;
}

上述代码会设置按钮的边框为1像素实线，边框颜色为灰色。同时也设置了按钮的圆角为3像素、内边距为5像素上下，10像素左右，并设置了按钮的背景颜色为浅灰色、字体颜色为深灰色。

示例二

假设我们要创建一个包含图片的圆形DIV，可以使用如下CSS代码：

.rounded-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid #FFFFFF;
}

.rounded-image img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代码会创建一个200像素宽、200像素高的圆形DIV，边框为4像素的实线，边框颜色为白色。图片居中显示在圆形DIV里面，且会自动缩放至最适合的大小。这个圆形DIV还包含了overflow:hidden属性，以防止图片溢出圆形边框。