常用的一些css属性

截取图片：

clip:rect(0px,20px,100px,100px);   

图片模糊处理：

filter: blur(0);

颜色渐变：

background-image: linear-gradient(90deg,#ff7414,#ff2156);

单行超出省略号换行：

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

多行控制文字在第几行显示省略号：

overflow: hidden;
text-overflow: ellipsis;
/*设置成弹性盒子 */
display: -webkit-box;
/*显示的个数 */
-webkit-line-clamp: 2;
/* 属性规定框的子元素应该被水平或垂直排列。 */
-webkit-box-orient: vertical;

//单图去掉间隙

vertical-align:bottom;

CSS3边框属性：

-webkit-box-shadow:0 15px 30px rgba(0,0,0,0.1);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
-webkit-transform:translate3d(0, -2px, 0);
transform:translate3d(0, -2px, 0);

CSS3延迟加载：

transition:all 0.1s;

CSS3边框放大和旋转：

box-shadow: 10px 10px 10px rgba(20,20,20,0.2);	
transform: rotate(0deg) scale(1.1);
-webkit-transform: rotate(0deg) scale(1.1);
-moz-transform: rotate(0deg) scale(1.1);

CSS3背景透明子元素不透明：

background-color:rgba(255,0,0,0.6)!important;
filter:Alpha(opacity=60);

CSS3图片旋转：

transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 

垂直居中：

display:flex;
align-items: center;
justify-content: center; 

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框居中：

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

drop-shadow是CSS3中filter（滤镜）中阴影滤镜，它就符合真实世界的投影，非透明的颜色，就有投影；透明部分，光线穿过，没投影。：

    filter: drop-shadow(rgb(170, 170, 170) 1px 1px 2px);

CSS3边框属性：

-webkit-box-shadow:0 15px 30px rgba(0,0,0,0.1);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
-webkit-transform:translate3d(0, -2px, 0);
transform:translate3d(0, -2px, 0);

左右边没有间隙排列

    /* 弹性盒子 */
    display: flex;
    /* 沿行轴线两端对齐，子元素之间有间隙 */
    justify-content: space-between;
    /* 子元素溢出父容器时换行 */
    flex-flow: row wrap;
	margin-top: 80upx;

输入框中全数字的文字不会自动换行加以下

	word-break: break-all;