当前位置：首页 > CSS

css制作图框

2026-03-11 22:13:49CSS

使用CSS边框属性制作图框

通过CSS的border属性可以快速为元素添加边框。基本语法如下：

.element {
  border: 2px solid #000;
}

2px控制边框粗细
solid定义线型（还可选dashed/dotted等）
#000设置颜色值

实现圆角边框效果

使用border-radius属性创建圆角：

.rounded-box {
  border: 3px dashed #3498db;
  border-radius: 15px;
}

数值越大圆角越明显，50%可制作圆形。

css制作图框

制作双色渐变边框

结合伪元素实现渐变边框：

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

创建图片边框效果

使用border-image属性实现图片边框：

css制作图框

.image-border {
  border: 15px solid transparent;
  border-image: url('border.png') 30 round;
}

30表示切片尺寸
round控制图片平铺方式

制作阴影增强立体感

通过box-shadow添加投影：

.shadow-box {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

参数依次控制：水平偏移、垂直偏移、模糊度、颜色。

实现悬停交互效果

添加动态交互：

.interactive-box {
  border: 2px solid #3498db;
  transition: all 0.3s ease;
}
.interactive-box:hover {
  border-color: #e74c3c;
  box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
}

标签: css