当前位置：首页 > CSS

css边框制作

2026-03-11 14:16:10CSS

CSS边框基础语法

使用border属性可以快速设置边框样式，包含宽度、样式和颜色：

border: 1px solid #000;

三个参数分别代表：边框宽度（如2px）、边框样式（如dotted/dashed）、边框颜色（如red或十六进制值）。

单独控制各边边框

通过border-top、border-right、border-bottom、border-left分别控制四个方向的边框：

border-top: 3px double #FF5733;
border-left: 1px groove rgba(0,0,0,0.2);

边框样式类型

常用边框样式值：

solid：实线
dashed：虚线
dotted：点线
double：双线
groove：3D凹槽
ridge：3D凸起
inset：3D内嵌
outset：3D外嵌

圆角边框效果

使用border-radius创建圆角，可设置统一值或分别指定四个角：

border-radius: 10px; /* 统一圆角 */
border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */

边框阴影效果

通过box-shadow添加边框阴影：

box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

参数依次为：水平偏移、垂直偏移、模糊半径、阴影颜色。

透明边框技巧

利用transparent创建透明边框，常用于交互效果：

border: 2px solid transparent;
transition: border-color 0.3s;
.element:hover {
  border-color: #3498db;
}

渐变边框实现

结合background-clip和伪元素实现渐变边框：

css边框制作

.element {
  position: relative;
  background: white;
  padding: 20px;
}
.element::before {
  content: "";
  position: absolute;
  top: -5px; left: -5px;
  right: -5px; bottom: -5px;
  background: linear-gradient(45deg, red, blue);
  z-index: -1;
  border-radius: 12px;
}