Css Block

用 Padding 绘制图形

绘制一个“三”


<div class="three"></div>
1
.three {
    display: inline-block;
    width: 140px;
    height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: black;
    background-clip: content-box;
}
1
2
3
4
5
6
7
8
9
10

绘制一个圆环


<div class="circle"></div>
1
.circle {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid;
    border-radius: 50%;
    background-color: black;
    background-clip: content-box;
}
1
2
3
4
5
6
7
8
9
10

内心圆是 width 100 和 height 100，中间空间是 padding，外圆是 border。background-color 默认是连 padding 也填充为背景色，使用 background-clip: content-box 将背景色设置为不填充 padding。

← 阻止 Margin 合并 →