css网页制作方框

使用 border 属性创建方框

在 CSS 中，可以通过 border 属性为元素添加边框。基本语法如下：

.box {
  border: 1px solid #000;
}

• 1px 表示边框宽度
• solid 表示边框样式（实线）
• #000 表示边框颜色（黑色）

调整方框大小和间距

使用 width 和 height 控制方框尺寸：

.box {
  width: 200px;
  height: 100px;
  padding: 20px; /* 内边距 */
  margin: 10px; /* 外边距 */
}

圆角方框设计

通过 border-radius 属性可以实现圆角效果：

.rounded-box {
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置四个角 */
  border-radius: 5px 10px 15px 20px;
}

阴影效果

使用 box-shadow 为方框添加阴影：

.shadow-box {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

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

双色方框设计

通过 border-color 设置不同颜色的边框：

.multi-border {
  border: 3px solid;
  border-color: #f00 #0f0 #00f #ff0;
}

响应式方框

使用百分比或视口单位创建自适应方框：

.responsive-box {
  width: 80%;
  max-width: 800px;
  min-width: 300px;
}

悬停效果

添加交互式效果：

.hover-box {
  transition: all 0.3s ease;
}
.hover-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}