css td居中_那些你总是记不住但又总是要用的css

一、设置input 的placeholder的字体样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari /

color: red;

}

input::-moz-placeholder { / Firefox 19+ /

color: red;

}

input:-ms-input-placeholder { / IE 10+ /

color: red;

}

input:-moz-placeholder { / Firefox 18- */

color: red;

}

设置input聚焦时的样式

input:focus {

background-color: red;

}

取消input的边框

border: none;

outline: none;

二、隐藏滚动条或更改滚动条样式

/css主要部分的样式//定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸/

::-webkit-scrollbar {

width: 10px; /对垂直流动条有效/

height: 10px; /对水平流动条有效/

}

/定义滚动条的轨道颜色、内阴影及圆角/

::-webkit-scrollbar-track{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: rosybrown;

border-radius: 3px;

}

/定义滑块颜色、内阴影及圆角/

::-webkit-scrollbar-thumb{

border-radius: 7px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #E8E8E8;

}

/定义两端按钮的样式/

::-webkit-scrollbar-button {

background-color:cyan;

}

/定义右下角汇合处的样式/

::-webkit-scrollbar-corner {

background:khaki;

}

三、文字超出隐藏并显示省略号

单行（一定要有宽度）

width:200rpx;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

四、控制div内的元素自动换行

word-wrap: break-word;

word-break：break-all;

五、 纯css画三角形

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

六、 绝对定位元素居中（水平和垂直方向）

#demo {

width: 200px;

height: 200px;

position: absolute;

left: 50%;

top: 50%;

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

background-color: green;

}

七、表格边框合并

table,tr,td{border: 1px solid #333;}

table{

border-collapse: collapse;

}

作者：kuangyaoqian

链接：https://juejin.im/post/6869659680496041991

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。