css语法

董梓凡
已于 2024-06-25 17:01:16 修改
阅读量103
点赞数
文章标签： css css3 前端
于 2022-10-19 10:25:38 首次发布
本文链接：https://blog.csdn.net/m0_46356495/article/details/127402112
版权
css样式
// 设置默认盒子模型
view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
	z-index: 1;
}
/* 对齐方式 */
.tct{text-align: center;}
.trt{text-align: right;}
.tlt{text-align: left;}
.box{box-sizing: border-box;}
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.d-none{display: none;}
.d-block{display: inline-block;}
.blb_f1{border-bottom: 3rpx solid #F1F1F1;}
.blb_ff{border-bottom: 3rpx solid #FFFFFF;}
.ov_hidden{overflow: hidden;}
/* 粗体 */
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
/* 加删除线 */
.tline {text-decoration: line-through;}
/* 多少行（3~15） */
.one_overflow{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}  /* 一行隐藏 */
.two_overflow{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}  /* 二行隐藏 */
.three_overflow{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}  /* 三行隐藏 */


.rows {display: flex;display: -webkit-flex;}  /* 盒子内容横向布局 */
.rowsa {display: flex;display: -webkit-flex;justify-content: space-around;}  /* 盒子内容居中间间隙布局 */
.rowsb {display: flex;display: -webkit-flex;justify-content: space-between;}  /* 盒子内容两端间隙布局 */
.rowsc {display: flex;display: -webkit-flex;justify-content: center;}  /* 盒子内容居中布局 */
.rowse {display: flex;display: -webkit-flex;justify-content: flex-end;}  /* 盒子内容结尾布局 */
.rowsm {align-items: center;}
.rowsw {flex-wrap: wrap;}
.rowsl {display: flex;flex-direction: column;}  /* 盒子内容竖向中间间隙布局 */
.rowsal {display: flex;justify-content: space-around;flex-direction: column;}  /* 盒子内容竖向中间间隙布局 */
.rowsbl {display: flex;justify-content: space-between;flex-direction: column;}  /* 盒子内容竖向两端间隙布局 */
.rowscl {display: flex;justify-content: center;flex-direction: column;}  /* 盒子内容竖向中间居中布局 */
.notYet {text-align: center;font-size: 30rpx;color: #999999;padding: 30rpx 0rpx;}  /* 页面无数据 */
.arrow{width: 7px;height: 7px;border-top: 1px solid #333333;border-right: 1px solid #333333;transform: rotate(45deg);}/* 右箭头 */
.arrow9{width: 7px;height: 7px;border-top: 1px solid #999999;border-right: 1px solid #999999;transform: rotate(45deg);}/* 右箭头 */
.arrfw{width: 7px;height: 7px;border-top: 1px solid #ffffff;border-right: 1px solid #ffffff;transform: rotate(45deg);}/* 右箭头 */
.arrfc{width: 7px;height: 7px;border-top: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;transform: rotate(45deg);}/* 右箭头 */
.shadow_total{box-shadow: 0px 0px 6rpx 2rpx rgba(136,136,136,0.24);}
.shadow_bottom{box-shadow: 2px 2px 6rpx 2rpx rgba(136,136,136,0.24);}
image{height: auto;}
/deep/::-webkit-scrollbar {		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
	width: 0;
	height: 0;
	color: transparent;
	background: transparent;
}


// 定义字体(rpx)单位
.fs-20{font-size:20rpx};
.fs-22{font-size:22rpx};
.fs-24{font-size:24rpx};
.fs-26{font-size:26rpx};
.fs-28{font-size:28rpx};
.fs-30{font-size:30rpx};
.fs-32{font-size:32rpx};
.fs-34{font-size:34rpx};
.fs-36{font-size:36rpx};
.fs-38{font-size:38rpx};
.fs-40{font-size:40rpx};
/* 颜色 */
.col000{color: #000000;}
.col111{color: #111111;}
.col222{color: #222222;}
.col333{color: #333333;}
.col444{color: #444444;}
.col555{color: #555555;}
.col666{color: #666666;}
.col777{color: #777777;}
.col888{color: #888888;}
.col999{color: #999999;}
.colfff{color: #FFFFFF;}
.col_E81B27 { color: #E81B27; }
.col_FF5555 { color: #FF5555; }
.col_E60012 { color: #E60012; }
.col_FE1515 { color: #FE1515; }
.col_25BFA7 { color: #25BFA7; }
.col_FF590F { color: #FF590F; }
.col_B3B3B3 { color: #B3B3B3; }
.col_2EA5E2 { color: #2EA5E2; }
.col_01B6B8 { color: #01B6B8; }
.col_FF3F45 { color: #FF3F45; }
.col_03C6BF { color: #03C6BF; }
.col_E42419 { color: #E42419; }
.col_FF0101 { color: #FF0101; }
.col_FF0000 { color: #FF0000; }
.col_FF5E00 { color: #FF5E00; }
.col_3DBF7F { color: #3DBF7F; }
.col_0ECE93 { color: #0ECE93; }
.col_EB1513 { color: #EB1513; }
.col_EA3F49 { color: #EA3F49; }
.col_108EE9 { color: #108EE9; }
.col_FE9600 { color: #FE9600; }
.col_1F74F6 { color: #1F74F6; }
.col_B7BED8 { color: #B7BED8; }
.col_EC232B { color: #EC232B; }
.col_FED130 { color: #FED130; }
.col_2BB09F { color: #2BB09F; }
.col_FFB62D { color: #FFB62D; }
.col_F23445 { color: #F23445; }
.col_3372FE { color: #3372FE; }
.col_EC1C24 { color: #EC1C24; }
.col_FF8601 { color: #FF8601; }
.col_111827 { color: #111827; }
.col_0093AC { color: #0093AC; }
.col_F1F5F9 { color: #F1F5F9; }
.col_7C8088 { color: #7C8088; }
.col_FCFCFC { color: #FCFCFC; }
.col_B7B7B7 { color: #B7B7B7; }
.col_B0B0B0 { color: #B0B0B0; }
.col_055E5D { color: #055E5D; }
.col_98A2B3 { color: #98A2B3; }
.col_FD3F9D { color: #FD3F9D; }
.col_EFEFEF { color: #EFEFEF; }
.col_DFDFDF { color: #DFDFDF; }
.col_E84335 { color: #E84335; }
.col_F8F8F8 { color: #F8F8F8; }
.col_F2F2F2 { color: #F2F2F2; }
.col_ADADB2 { color: #ADADB2; }
.col_CFCFCF { color: #CFCFCF; }
.col_077FF6 { color: #077FF6; }
.bg077FF6 {background-color: #077FF6;}
.bgCFCFCF {background-color: #CFCFCF;}
.bgADADB2 {background-color: #ADADB2;}
.bgF2F2F2 {background-color: #F2F2F2;}
.bgF8F8F8 {background-color: #F8F8F8;}
.bgE84335 {background-color: #E84335;}
.bgDFDFDF {background-color: #DFDFDF;}
.bgEFEFEF {background-color: #EFEFEF;}
.bgFD3F9D {background-color: #FD3F9D;}
.bg98A2B3 {background-color: #98A2B3;}
.bg055E5D {background-color: #055E5D;}
.bgB0B0B0 {background-color: #B0B0B0;}
.bgB7B7B7 {background-color: #B7B7B7;}
.bgFCFCFC {background-color: #FCFCFC;}
.bg7C8088 {background-color: #7C8088;}
.bgF1F5F9 {background-color: #F1F5F9;}
.bg0093AC {background-color: #0093AC;}
.bg111827 {background-color: #111827;}
.bgFF8601 {background-color: #FF8601;}
.bgEC1C24 {background-color: #EC1C24;}
.bg3372FE {background-color: #3372FE;}
.bgF23445 {background-color: #F23445;}
.bgFFB62D {background-color: #FFB62D;}
.bg2BB09F {background-color: #2BB09F;}
.bgFED130 {background-color: #FED130;}
.bgEC232B {background-color: #EC232B;}
.bgEB1513 {background-color: #EB1513;}
.bgFE9600 {background-color: #FE9600;}
.bg1F74F6 {background-color: #1F74F6;}
.bg00{background-color: #000000;}
.bgf1{background-color: #F1F1F1;}
.bgf5{background-color: #F5F5F5;}
.bgf9{background-color: #F9F9F9;}
.bg99{background-color: #999999;}
.bgff{background-color: #FFFFFF;}
.bg33{background-color: #333333;}
.bg22{background-color: #222222;}


//加载中

.loaderBox4 {
    width: 120rpx;
    height: 22rpx;
    border-radius: 100rpx;
    color: #514b82;
    border: 2rpx solid #514b82;
    position: relative;
}
.loaderBox4::before {
	width: 112rpx;
	height: 14rpx;
    border-radius: 100rpx;
    content: "";
    position: absolute;
    margin: 2rpx;
    background: linear-gradient(rgb(81, 75, 130) 0 0) 0/0% no-repeat #ddd;
    animation: cartoon 2s infinite linear;
}
@keyframes cartoon {
	100% {
	  background-size: 100%;
	}
}


.loaderBox3 {
    width: 120rpx;
    height: 20rpx;
    border-radius: 20rpx;
    background: repeating-linear-gradient(
	  135deg,
	  #f03355 0 10rpx,
	  #ffa516 0 20rpx
	) 0/0% no-repeat, repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
	animation: cartoon 2s infinite;
}
@keyframes cartoon {
	100% {
	  background-size: 100%;
	}
}


.loaderBox2 {
    width: 80rpx;
    height: 40rpx;
    border: 2rpx solid rgb(103, 194, 58);
    padding: 3rpx;
    background: repeating-linear-gradient(
        90deg,
        rgb(103, 194, 58) 0 10rpx,
        #0000 0 16rpx
      )
      0/0% no-repeat content-box content-box;
    position: relative;
    animation: cartoon 2s infinite steps(6);
}
.loaderBox2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 10rpx;
    height: 10rpx;
    border: 2rpx solid rgb(103, 194, 58);
}
@keyframes cartoon {
    100% {
      background-size: 120%;
    }
}


.loaderBox1 {
	font-size: 40rpx;
	overflow: hidden;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	transform: translateZ(0);
	/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
	animation: loadBox 2.7s infinite ease, round 2.7s infinite ease;
}
@keyframes loadBox {
	0% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}

	5%,
	95% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}

	10%,
	59% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.087px -0.825px 0 -0.42px,
		-0.173px -0.812px 0 -0.44px, -0.256px -0.789px 0 -0.46px,
		-0.297px -0.775px 0 -0.477px;
	}

	20% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.338px -0.758px 0 -0.42px,
		-0.555px -0.617px 0 -0.44px, -0.671px -0.488px 0 -0.46px,
		-0.749px -0.34px 0 -0.477px;
	}

	38% {
	  box-shadow: 0 -0.83px 0 -0.4px, -0.377px -0.74px 0 -0.42px,
		-0.645px -0.522px 0 -0.44px, -0.775px -0.297px 0 -0.46px,
		-0.82px -0.09px 0 -0.477px;
	}

	100% {
	  box-shadow: 0 -0.83px 0 -0.4px, 0 -0.83px 0 -0.42px, 0 -0.83px 0 -0.44px,
		0 -0.83px 0 -0.46px, 0 -0.83px 0 -0.477px;
	}
}

@keyframes round {
	0% {
	  transform: rotate(0deg); /* 开始旋转 div 元素 */
	}

	100% {
	  transform: rotate(360deg); /* 结束旋转 div 元素 */
	}
}