编程知识 cdmana.com

那些你总是记不住但又总是要用的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;

  }

  复制代码

版权声明
本文为[osc_60387719]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4799168/blog/4713234

Scroll to Top