css分析 - 背景
2020-08-19 本文已影响0人
叶落清秋
背景
例子来自colorui及网上一些资源，不定时更新
1. 深色
a. 效果
b. 使用
<view class="bg-blue">基础使用</view>
<view :class="'bg-'+color">动态使用</view>
c. css样式分析
例子都只取一个，其他的css样式都是类同的
//白色字体，蓝色背景
.bg-blue {
background-color: #0081ff;
color: #ffffff;
}
2. 淡色
a. 效果
b. 使用
<view class="bg-blue light">基础使用</view>
<view class=“light” :class="'bg-'+color">动态使用</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会匹配一下共计七种，按权重覆盖
//权重（10） .red .blue .orange
//权重（20） .red.blue .red.orange .blue.orange
//权重（30） .red.blue.orange
//同权重覆盖的顺序与css里定义的顺序有关,相同属性最后定义的覆盖前面的，不同则叠加
//最终匹配效果为{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">基础使用</view>
<view :class="'bg-gradual'+color">动态使用</view>
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. 使用
<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，使其固定在一个容器内（否则下面的绝对位置直接从起点开始）
.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.代码
<!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层叠加起来就有了荧光和边框效果。
