背景
例子来自colorui及网上一些资源，不定时更新
1. 深色
a. 效果
b. 使用
基础使用
动态使用
c. css样式分析
例子都只取一个，其他的css样式都是类同的
//白色字体，蓝色背景
.bg-blue {
background-color: #0081ff;
color: #ffffff;
}
2. 淡色
a. 效果
b. 使用
基础使用
动态使用
c. css样式分析
//注意没有空格，属于多类选择器
.bg-blue.light {
color: #0081ff;
background-color: #cce6ff;
}
多类选择器例子：
This is a paragraph.
This is a paragraph.
// red blue orange会匹配一下共计七种，按权重覆盖
//权重（10） .red .blue .orange
//权重（20） .red.blue .red.orange .blue.orange
//权重（30） .red.blue.orange
//同权重覆盖的顺序与css里定义的顺序有关,相同属性最后定义的覆盖前面的，不同则叠加
//最终匹配效果为{color:black;font-size: 60px;text-indent: 10px;}
This is a paragraph.
3. 渐变
a. 效果
b. 使用
基础使用
动态使用
c. css样式分析
.bg-gradual-red {
//45°角线性渲染 （0°对应时钟秒针的0秒，90°对应15秒，180°对应30秒，270°对应45秒）
background-image: linear-gradient(45deg, #f43f3b, #ec008c);
color: #ffffff;
}
图片背景
a. 效果
b. 使用
c. css样式分析
.bg-img {
//把背景图片放大到适合元素容器的尺寸，图片比例不变
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
//注意这里需要用relative，使其固定在一个容器内（否则下面的绝对位置直接从起点开始）
.bg-mask {
background-color: #333333;
position: relative;
}
//遮罩层的实体（主要是黑色+透明度0.4）
.bg-mask::after {
content: "";
border-radius: inherit;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
荧光效果
网上看见一个荧光效果，觉得蛮好看就扒过来分析了一下https://www.jianshu.com/p/c501fee6fb68
a. 效果
b.代码
Document
赠汪伦
李白
李白乘舟将欲行，
忽闻岸上踏歌声。
桃花潭水深千尺，
不及汪伦送我情。
c.分析
荧光效果主要是:before和:after伪元素起的作用，先将其注释起来，看下原本的效果：
可以看见并没有荧光效果。
.box:before, .box:after{background:linear-gradient(235deg,#89ff00,#060c21,#00bcd4);}
这个是给2个伪元素添加一个线性渲染的背景
.box:before{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -1;}
有了上面蒙层的介绍，这个效果就是整体向外拉伸了2px。z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:
.box:after{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -2;filter:blur(40px);}
和before一样，就是多了个高斯模糊，注释了黑色背景来看下.box:after的效果:
所以将3层叠加起来就有了荧光和边框效果。