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;
}
 
 

相关文章