背景
例子來自colorui及網(wǎng)上一些資源，不定時更新
1. 深色
a. 效果
b. 使用
<view class="bg-blue">基礎(chǔ)使用</view>
<view :class="'bg-'+color">動態(tài)使用</view>
c. css樣式分析
例子都只取一個，其他的css樣式都是類同的
//白色字體，藍色背景
.bg-blue {
background-color: #0081ff;
color: #ffffff;
}
2. 淡色
a. 效果
b. 使用
<view class="bg-blue light">基礎(chǔ)使用</view>
<view class=“l(fā)ight” :class="'bg-'+color">動態(tài)使用</view>
c. css樣式分析
//注意沒有空格，屬于多類選擇器
.bg-blue.light {
color: #0081ff;
background-color: #cce6ff;
}
多類選擇器例子：
<html>
<head>
<style type="text/css">
.red {
color:red;
font-size: 20px;
}
.blue {
color:blue;
font-size: 30px;
}
.red.blue{
color:yellow;
font-size: 40px;
}
.red.orange{
color:yellow;
text-indent: 10px;
}
.red.blue.orange{
color:black;
font-size: 60px;
}
</style>
</head>
<body>
<p class="red">This is a paragraph.</p>
<p class="blue">This is a paragraph.</p>
// red blue orange會匹配一下共計七種，按權(quán)重覆蓋
//權(quán)重（10） .red .blue .orange
//權(quán)重（20） .red.blue .red.orange .blue.orange
//權(quán)重（30） .red.blue.orange
//同權(quán)重覆蓋的順序與css里定義的順序有關(guān),相同屬性最后定義的覆蓋前面的，不同則疊加
//最終匹配效果為{color:black;font-size: 60px;text-indent: 10px;}
<p class="red blue orange">This is a paragraph.</p>
</body>
</html>
3. 漸變
a. 效果
b. 使用
<view class="bg-gradual-blue">基礎(chǔ)使用</view>
<view :class="'bg-gradual'+color">動態(tài)使用</view>
c. css樣式分析
.bg-gradual-red {
//45°角線性渲染 （0°對應(yīng)時鐘秒針的0秒，90°對應(yīng)15秒，180°對應(yīng)30秒，270°對應(yīng)45秒）
background-image: linear-gradient(45deg, #f43f3b, #ec008c);
color: #ffffff;
}
圖片背景
a. 效果
b. 使用
<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;"></view>
c. css樣式分析
.bg-img {
//把背景圖片放大到適合元素容器的尺寸，圖片比例不變
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
//注意這里需要用relative，使其固定在一個容器內(nèi)（否則下面的絕對位置直接從起點開始）
.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;
}
熒光效果
網(wǎng)上看見一個熒光效果，覺得蠻好看就扒過來分析了一下http://m.itdecent.cn/p/c501fee6fb68
a. 效果
b.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{padding:0;margin:0;font-family:'Poppins',sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#060c21;}
h3{text-align: center;}
h5{text-align: center;margin-left: 80px;font-weight: 400;}
.content{padding:20px;box-sizing:border-box;color:#ffffff;}
.box{position:relative;width:300px;height:400px;display:flex;justify-content:center;align-items:center;background-color: black;}
.box:before{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -1;}
.box:after{content:'';position:absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;z-index: -2;filter:blur(40px);}
.box:before, .box:after{background:linear-gradient(235deg,#89ff00,#060c21,#00bcd4);}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h3>贈汪倫</h3>
<h5>李白</h5>
<p>李白乘舟將欲行，</p>
<p>忽聞岸上踏歌聲。</p>
<p>桃花潭水深千尺，</p>
<p>不及汪倫送我情。</p>
</div>
</div>
</body>
</html>
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層疊加起來就有了熒光和邊框效果。
