易忘CSS样式整理

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

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

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

多行文本溢出显示省略号

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

2、文字阴影

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;
}

3、解决IOS页面滑动卡顿

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

4、绘制三角形

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

带边框三角形

<div id="blue"><div>

#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;
}

5、Table表格边框合并

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

6、css 选取第 n 个标签元素

first-child first-child 表示选择列表中的第一个标签。
last-child last-child 表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第 3 个标签
nth-child(2n) 这个表示选择列表中的偶数标签
nth-child(2n-1) 这个表示选择列表中的奇数标签
nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。

7、使元素鼠标事件失效

.wrap {
  // 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
 pointer-events: none;
 cursor: default;
}

8、字母大小写转换

p {text-transform: uppercase}  // 将所有字母变成大写字母
p {text-transform: lowercase}  // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps}   // 将字体变成小型的大写字母

8、首行缩进

text-indent:2em;

设置高度等于动态宽度（CSS方法）

如果根据父容器设置宽度，则可以将高度设置为0，并将填充-底部设置为百分比，该百分比将根据当前宽度计算：

.img-div {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    img {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

这在所有主要浏览器中都能很好地工作。