使用css制作边框

使用CSS制作边框

CSS提供了多种方法来为元素添加边框，包括设置边框样式、宽度、颜色以及圆角效果。

基本边框属性

通过border属性可以快速设置边框的样式、宽度和颜色。例如：

div {
  border: 2px solid #000000;
}

这里2px是边框宽度，solid是边框样式（实线），#000000是边框颜色（黑色）。

单独设置边框属性

可以分别设置边框的不同属性：

div {
  border-width: 1px;
  border-style: dashed;
  border-color: red;
}

border-width控制边框宽度，border-style控制边框样式（如dotted、dashed、double等），border-color控制边框颜色。

单边边框

可以为元素的某一边单独设置边框：

div {
  border-top: 3px dotted blue;
  border-right: 1px solid green;
  border-bottom: 2px dashed orange;
  border-left: 4px double purple;
}

边框圆角

使用border-radius属性可以为边框添加圆角效果：

div {
  border: 2px solid black;
  border-radius: 10px;
}

也可以单独设置每个角的圆角：

div {
  border-radius: 5px 10px 15px 20px;
}

边框阴影

通过box-shadow属性可以为边框添加阴影效果：

div {
  border: 1px solid gray;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

5px 5px控制阴影偏移，10px控制模糊半径，rgba(0, 0, 0, 0.5)控制阴影颜色和透明度。

透明边框

可以使用transparent关键字创建透明边框：

div {
  border: 2px solid transparent;
}

这在某些动画效果或布局调整中很有用。

边框图像

CSS还允许使用图片作为边框：

div {
  border: 10px solid;
  border-image: url(border.png) 30 round;
}

url(border.png)指定边框图片，30定义切片宽度，round控制图片如何填充边框区域。