博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS之不常用但重要的样式总结
阅读量:5068 次
发布时间:2019-06-12

本文共 1032 字,大约阅读时间需要 3 分钟。

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

转载于:https://www.cnblogs.com/chenbeibei520/p/10251790.html

你可能感兴趣的文章
亲近用户—回归本质
查看>>
中文脏话识别的解决方案
查看>>
CSS之不常用但重要的样式总结
查看>>
Python编译错误总结
查看>>
URL编码与解码
查看>>
日常开发时遇到的一些坑(三)
查看>>
Eclipse 安装SVN插件
查看>>
深度学习
查看>>
TCP粘包问题及解决方案
查看>>
构建之法阅读笔记02
查看>>
添加按钮
查看>>
移动端页面开发适配 rem布局原理
查看>>
Ajax中文乱码问题解决方法(服务器端用servlet)
查看>>
会计电算化常考题目一
查看>>
阿里云服务器CentOS6.9安装Mysql
查看>>
剑指offer系列6:数值的整数次方
查看>>
js 过滤敏感词
查看>>
poj2752 Seek the Name, Seek the Fame
查看>>
软件开发和软件测试,我该如何选择?(蜗牛学院)
查看>>
基本封装方法
查看>>