CSS背景与边框

CSS背景与边框属性控制元素的视觉呈现，是样式开发中最常用的属性。

背景属性

背景颜色

.box {
  background-color: #3498db;
  background-color: rgb(52, 152, 219);
  background-color: rgba(52, 152, 219, 0.8);
}

背景图片

.box {
  background-image: url('bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

简写属性

.box {
  background: #3498db url('bg.png') no-repeat center/cover;
}

边框属性

基本语法

.box {
  border-width: 1px;
  border-style: solid;
  border-color: #333;
}

/* 简写 */
.box {
  border: 1px solid #333;
}

单边设置

.box {
  border-top: 1px solid #333;
  border-right: 2px dashed #666;
  border-bottom: 1px dotted #999;
  border-left: none;
}

圆角边框

.box {
  border-radius: 10px;
  border-radius: 50%;          /* 圆形 */
  border-radius: 10px 20px;    /* 左上右下 左下右上 */
}

边框样式值

注意：border-radius 不影响边框绘制，只影响边框圆角形状。

要点总结

• background 可简写多个属性，顺序不强制但建议统一
• border 简写顺序：width style color
• border-radius 可创建圆角或圆形元素
• 背景图片默认平铺，需 no-repeat 禁止

存放路径：articles/CSS/入门/CSS样式属性/CSS背景与边框.md