css 常用样式

设置透明背景
opacity:0.2;  或 background-color:rgba(220,38,38,0.2);

// 图片相关样式
background-color: #000000;
// linear-gradient函数用于创建一个线性渐变的 "图像" 90deg（角度值）
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
// background-size属性指定背景图片大小。
background-size: 400%;
// filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
filter: blur(20px);

 

/** view内文字过多省略显示 单行情况*/
overflow:hidden;//超出一行文字自动隐藏
text-overflow:ellipsis;//文字隐藏后添加省略号
white-space:nowrap;//强制不换行

/** 多行情况*/
display: -webkit-box;
word-break:break-all;
text-overflow:ellipsis;
font-size:28rpx;
overflow:hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;//设置 需要显示的行数

// 不使用项目符号（去除li符号）
list-style: none;

// overflow 属性规定当内容溢出元素框时发生的事情。
// auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow: auto;


//属性定义在滚动容器中的一个临时点如何被严格的执行。
//简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何处理滚动结束状态。
//scroll-snap-type:none | [ x | y | block | inline | both | ] [ mandatory | proximity ] ?
//与scroll-snap-align: start;配合使用
ul{
    scroll-snap-type: y mandatory;
}
li{
    scroll-snap-align: start;
}

// 隐藏滚动条
-ms-overflow-style: none; /* IE 10+ 隐藏滚动条*/
scrollbar-width: none; /* Firefox 隐藏滚动条*/
/* 谷歌浏览器隐藏滚动条 .roller指的是div的类名*/
.roller::-webkit-scrollbar{
	display: none;
}

background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, 
	rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.3) 100%);
// 设置阴影效果
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.2);

// 让盒子里面的内容垂直居中的方法
div{
    width: 500px;
	height: 200px;
	background-color: aqua;
	display: flex;
	justify-content: center;
	align-items: center;
}