一些实用CSS代码

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

渐变:

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

位移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);

 

发表评论

*

code