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;
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值