css小技能

集中式小技能

1.设置颜色样式渐变，背景色长度，角度的css背景样式

background-image:linear-gradient(180deg, #0EB174 8%, #f7f7f7 8%);

1-1.设置 三角形 最快方法

background: linear-gradient(to left top, #bad6e1 50%, #d3f2ff 50%);

2.滤镜

filter: blur(3px);

3.超出两行隐藏 并显示省略号

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

显示一行超出

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

4.边框虚线

border-top: dashed;
border-width: thin;
border-color: #f3f3f3;

5.排列方向

flex-direction

定义了 flex 容器中 flex 成员项的排列方向，默认值为 column

6.flex 两端对齐_让CSS flex布局最后一行左对齐 更多

box:{
display: flex; 
justify-content: space-between; 
flex-wrap: wrap;
}

6. display: grid; 表格布局 "可以解决自动换行，靠左排序"

box:{ 
display: grid;
 grid-template-columns: repeat(4, 170rpx); // 4 一行几个，170rpx一个的宽度
grid-row-gap: 6rpx; // 水平间距
grid-column-gap: 12rpx;// 上下间距
 }

7. 宫格模式 默认为靠左排序 display: flex; flex-wrap: wrap; 方式

<view class="list-box">
	<view class="list-item" v-for="(item,index) in list" :key="index">
		<image class="list-item-img" src="../../static/test/图层24.png" mode=""></image>
		<view class="line-clamp-a list-item-name">剧名剧名剧名剧名剧名剧名剧名剧名剧名剧名剧名剧名10字...</view>
		<view class="list-item-num">分类名·66集</view>
	</view>
</view>

.list-box{
	padding:27rpx 30rpx 0;
	display: flex;
	flex-wrap: wrap;
	.list-item{
		width: 220rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.list-item-img{
			width: 100%;
			height: 308rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		.list-item-name{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			padding-top: 20rpx;
		}
		.list-item-num{
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			padding-top: 20rpx;
		}
	}
	.list-item:not(:nth-child(3n)){
		margin-right: 15rpx; // :not(:nth-child(3n)) 是一个伪类组合，它会选择不是每行第三个子元素的所有.column元素。
	}
}