css中不常见属性

211 阅读1分钟
  1. 双击文本不选中文本 在css中加:user-select:none;

  2. 文字与文字之间间距 在css中加:letter-spacing: 4px; 值越大,间距越大

  3. 图片边框 加了图片边框后,图片下面的内容都不能点击了。 在css中加pointer-events:none; 即可解决

  4. Bootstrap的input点击去除边框 在input的css中加:box-showd:0 !import; 原生的去除input边框:outline:none

  5. 滚动条样式

  #xxx::-webkit-scrollbar {/*滚动条整体样式*/
  width: 1px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  #xxx::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
  }
  #xxx::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
  }

  1. 解决点击select中下拉的选项,选项框的背景色会变白情况
input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px rgba(13, 221, 41, 0.1) inset !important;
    -webkit-text-fill-color: #fff !important;
   	-webkit-background-clip:text;
  1. 样式穿透 pointer-events:none; //样式穿透 b盒子上面覆盖一个a盒子,鼠标点击的时候照样可以点击b页面的事件或者css样式

  2. table表格内容超长自动换行

//自动换行
td{
	table-layout: fixed;
	word-break: break-all;
}

更改前:

691a2106cf624cafbd5a8941c488cfc3.png 更改后:

a9516feff53b4975a4c449df12dfb5a4.png

原文链接:blog.csdn.net/m0_52539553…