CSS 背景与边框

背景

• background-color：背景颜色

举个🌰：

.box {
    background-color: #42b883;
}

• background-image：背景图片

举个🌰：

.box {
    background-color: #42b883;
    background-image: url('https://img.yuluyao.com/blog/NzU5NTIyNDcyNzY3NzA1ODg3NA.png');
}

• background-repeat：背景图片平铺

举个🌰：

.box {
    background-color: #42b883;
    background-image: url('https://img.yuluyao.com/blog/NzU5NTIyNDcyNzY3NzA1ODg3NA.png');
    background-repeat: no-repeat;
}

.box {
    background-color: #42b883;
    background-image: url('https://img.yuluyao.com/blog/NzU5NTIyNDcyNzY3NzA1ODg3NA.png');
    background-repeat: repeat-x;
}

• background-size：背景图片大小
• background-position：背景图片定位

另外，还有渐变背景

.box {
    background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

还可以定义多个背景，靠前的叠在上面。

边框

四条边

设置四个方向的边框：

• border：是border-width、border-style、border-color的简写。

  .box {
      border-top: 1px solid black;
  }

• border-width：边框宽度

• border-style：边框样式，默认为none，即没有边框。

• border-color：边框颜色

设置单个方向的边框：

• border-top：单独设置一个方向的边框，下同。这里是border-top-width、border-top-style、border-top-color的简写。
• border-right
• border-bottom
• border-left

圆角

border-radius：是一个简写属性，定义边框的4个角的半径。使用这个属性，可以对4个角分别定义。

半径是一个值时，会确定一个圆形；半径是两个值时，会确定一个椭圆；这个圆或椭圆与边框的交集，形成圆角效果。

举个🌰1，4个角都是相同的圆形圆角：

border-radius: 10px;

或：

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

举个🌰2，4个角都是相同的椭圆形圆角：

border-radius: 10px/20px;

或：

border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;

举个🌰3，左上、右下设置圆形圆角，右上、左下无圆角：

border-radius: 10px 0px/ 10px 0;

或：

border-top-left-radius: 10px 10px;
border-top-right-radius: 0px 0px;
border-bottom-right-radius: 10px 10px;
border-bottom-left-radius: 0px 0px;

举个🌰4，虽然效果比较丑，但是从中可以看出参数的含义：

border-radius: 12px 9px 18px / 6px 12px;

或：

border-top-left-radius: 12px 6px;
border-top-right-radius: 9px 12px;
border-bottom-right-radius: 18px 6px;
border-bottom-left-radius: 9px 12px;