1、background-clip
规定背景的绘制区域
background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
input[id="pb"]:checked ~ div{
background-clip: padding-box;
}
2、nth-of-type(1)和nth-child(1)
nth-child(N):该选择器选取父元素的第 N 个子元素，与类型无关。 nth-of-type(N):选择器选取父元素的特定类型的第 N 个子元素的每个元素。
3、outline
color/style/width
outline: #B4A078 dashed 1px;
outline-offset: -10px;
box-shadow: 0 0 0 10px #E8E2D6,
0 0 0 20px #E1D9C9,
0 0 0 30px #D9CFBB,
0 0 0 40px #D2C6AE,
0 0 0 50px #CABCA0,
0 0 0 60px #C3B393,
0 0 0 70px #BBA985,
0 0 0 80px #B4A078;
4、边框内圆角
border-radius会影响box-shadow（内外）变圆角；但是不会影响outline
div {
width: 209px;
margin: 29px auto;
padding: 8px 16px;
background: #f4f0ea;
border-radius: 8px;
box-shadow: 0 0 0 5px #b4a078;
outline: 6px solid #b4a078;
}
5、背景图片定位
background-position: calc(100% - 29px) calc(100% - 28px);
background-position: right 29px bottom 28px;
background-origin: content-box;
background-origin: content-box|padding-box|border-box;
相对于内容框来定位背景图像
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
6、条纹背景
<main>
<div class="progress-outer">
<div class="progress-enter">
<div class="progress-bg"></div>
</div>
</div>
</main>
main {
width: 100%;
padding: 80px 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.progress-outer {
width: 60%;
height: 12px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.progress-enter {
height: inherit;
background: rgba(180, 160, 120, .2);
}
.progress-bg {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
#D9CFBB 0, #D9CFBB 75%, #C3B393 0);
<!--background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 25%, #C3B393 50%,-->
<!-- #D9CFBB 50%, #D9CFBB 75%, #C3B393 75%);-->
background-size: 16px 16px;
animation: panoramic 20s linear infinite;
}
@keyframes panoramic {
to {
background-position: 200% 0;
}
}
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,#D9CFBB 0, #D9CFBB 75%, #C3B393 0);
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 25%, #C3B393 50%,#D9CFBB 50%, #D9CFBB 75%, #C3B393 75%);
