一些实用CSS代码

平时常用的一些非常有特色的CSS代码

背景渐变：

background: linear-gradient(to bottom, #a9e9d3, #85ab36);

文字颜色渐变：

background-image: linear-gradient(90deg, rgb(255, 167, 69) -45%, rgb(254, 134, 159) 10%, rgb(239, 122, 200) 25%, rgb(160, 131, 237) 60%, rgb(67, 174, 255) 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

位移50%:

transform: translate(-50%,-50%);

点击透过:

pointer-events: none;

方形:

.squarebox {
    display: block;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.squarebox:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.squarebox .wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

元素动态改变:

-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

文字垂直居中:

.abc::before{
	display: inline-block;
	content: "";
	height: 100%;
	vertical-align: middle;
}

文字溢出省略… :

/* 单行 */
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
/* 多行 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* td内的文字超出显示省略号： */
table{
　　table-layout: fixed;
}
td{
　　white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
}

改变placeholder的颜色属性:

input::-webkit-input-placeholder{
    color:#c5c5c5;
}
input::-moz-placeholder{/* Mozilla Firefox 19+ */
    color:#c5c5c5;
}
input:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
    color: #c5c5c5;
}
input:-ms-input-placeholder{
    color: #c5c5c5;
}

解决chrome浏览器div背景图宽高压缩后模糊问题：

image-rendering: -webkit-optimize-contrast;

解决safari overflow hidden+CSS transform动画情况下border-radius圆角或box-shadow阴影不起作用问题：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

刘海屏iPhone安全区域：

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);