CSS之不常用但重要的样式总结

1，设置颜色渐变

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.67), rgba(255, 255, 255, 0));（从上到下的颜色渐变）

background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.71));（设置圆周渐变，从外到里）

2，设置背景图片

① background: url("") 0 0 no-repeat;（URL的值可以是图片所在路径、地址链接或base64编码）

② background: url("") no-repeat center;

③ background-image: url("");
 ?background-repeat: no-repeat;
 ?background-position: 50% 50%;
 ?background-size: 100% 100%;

3，css样式实现播放暂停、开始按钮

　① 开始按钮（竖立的等于号效果）

&:before {
 ?width: 5px;
 ?height: 16px;
 ?background: #fff;
 ?position: absolute;
 ?content: "";
 ?left: 16px
}
&:after {
 ?width: 5px;
 ?height: 16px;
 ?background: #fff;
 ?position: absolute;
 ?content: "";
 ?right: 16px
}
② 暂停按钮（三角形）

&:before {
 ?width: 0;
 ?height: 0;
 ?border-left: 15px solid #fff;
 ?border-right: 15px solid transparent;
 ?border-top: 8px solid transparent;
 ?border-bottom: 8px solid transparent;
 ?position: absolute;
 ?content: "";
 ?left: 6px;
}

CSS之不常用但重要的样式总结

原文地址：https://www.cnblogs.com/chenbeibei520/p/10251790.html