css 部分常见样式

阴影
box-shadow: 1px 1px 30px #d7d7d7;

背景渐变
background: linear-gradient(to top, #5f4291,#5b4585 ,#544971);

图片模糊
filter: blur(2px) brightness(0.5);

伪类 1px 线
:after{
content: "";
display: block;
position: absolute;
left: 0;
bottom: 50%;
width: 100%;
border-bottom: 1px solid #c8c7cc;
transform:translateY(-50%);
transform: scaleY(0.2);
}

---

圆背景阴影渐变
background-image: linear-gradient(#c9c3fc, #b7c4fd, #abc5fe),
linear-gradient(-180deg,#dfdbfd,#b2c4fe,#7285ab);
border: 6rpx solid transparent;
box-sizing:border-box;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;

---

底部左右弧度20rpx
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;

---

div在页面整体居中 
方法一：
position: absolute;
left: 50%;
top:50%;
transform: translate3D(-50%,-50%,0);
width: 540rpx;
min-height: 315rpx;
background: #f6f2ff;
border-radius: 10rpx;
z-index: 10;
.flex-column();
.flex-hvc();

方法二：
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1000;

---

伪类小箭头 > ：
:after{
content: " ";
position: absolute;
display: inline-block;
width: 13rpx;
height: 13rpx;
border-width: 2px 2px 0 0;
border-color: #C8C8CD;
border-style: solid;
transform:rotate(135deg);
transition: transform 0.2s ease-out;
top: 50%;
right: 30rpx;
margin-top: -8rpx;
}