1、文字超出部分显示省略号

单行文本的溢出显示省略号（一定要有宽度）

  p{
     width:200rpx;
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
  }

多行文本溢出显示省略号

 p {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     overflow: hidden;
  }

2、中英文自动换行

word-break:break-all;只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap; 强制不换行，都起作用

 p{
   word-wrap: break-word;
   white-space: normal;
   word-break: break-all;
 }
 //不换行
 .wrap {
   white-space:nowrap;
 }
 //自动换行
 .wrap {
   word-wrap: break-word;
   word-break: normal;
 }
 //强制换行
 .wrap {
   word-break:break-all;
 }

3、文字阴影

text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下：text-shadow: [X-offset,Y-offset,Blur,Color];

X-offset:指阴影居于字体水平偏移的位置。 Y-offset:指阴影居于字体垂直偏移的位置。 Blur:指阴影的模糊值。 color:指阴影的颜色；

 h1{
 text-shadow: 5px 5px 5px #FF0000;
 }

4、设置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;
 }

5、不固定高宽 div 垂直居中的方法

方法一：伪元素和 inline-block / vertical-align（兼容 IE8）

 .box-wrap:before {
       content: '';
       display: inline-block;
       height: 100%;
       vertical-align: middle;
       margin-right: -0.25em; //微调整空格
 }
 .box {
      display: inline-block;
      vertical-align: middle;
 }

方法二：flex(不兼容 ie8 以下)

 .box-wrap {
      height: 300px;
      justify-content:center;
      align-items:center;
      display:flex;
      background-color:#666;
  }

方法三：transform(不兼容 ie8 以下)

  .box-wrap {
      width:100%;
      height:300px;
      background:rgba(0,0,0,0.7);
      position:relative;
 }
 .box{
     position:absolute;
     left:50%;
     top:50%;
     transform:translateX(-50%) translateY(-50%);
     -webkit-transform:translateX(-50%) translateY(-50%);
 }

6、解决IOS页面滑动卡顿

body,html{
    -webkit-overflow-scrolling: touch;
}

7、设置滚动条样式

.test::-webkit-scrollbar{
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.test::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}

8、实现隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

9、css 绘制三角形

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}

实现带边框的三角形：

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

注: 如果想绘制右直角三角，则将左 border 设置为 0；

如果想绘制左直角三角，将右 border 设置为 0 即可（其它情况同理）。

10、Table表格边框合并

table,tr,td{
  border: 1px solid #666;
}
table{
  border-collapse: collapse;
}