使用css制作边框

使用 CSS 制作边框

CSS 提供了多种方式为元素添加边框，以下是几种常见的方法和属性：

基本边框属性 border 是简写属性，可以同时设置边框的宽度、样式和颜色。语法如下：

border: width style color;

示例：

div {
  border: 2px solid #000;
}

单独设置边框属性 可以分别设置边框的宽度、样式和颜色：

border-width: 1px;
border-style: solid;
border-color: red;

边框样式 border-style 支持多种样式：

• solid：实线
• dotted：点线
• dashed：虚线
• double：双线
• groove：3D凹槽
• ridge：3D凸槽
• inset：3D内嵌
• outset：3D外嵌
• none：无边框
• hidden：隐藏边框

示例：

div {
  border-style: dotted dashed solid double;
}

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

border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double black;

圆角边框 使用 border-radius 属性可以创建圆角边框：

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

边框阴影 box-shadow 可以为边框添加阴影效果：

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

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

div {
  border: 2px solid transparent;
}

边框图像 border-image 允许使用图像作为边框：

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

这些方法可以根据需求灵活组合使用，实现各种边框效果。