前端样式杂篇合集

CSS

---

层叠顺序：

    * background/border
    * z-index < 0
    * block
    * float
    * inline/inline\-block
    * z-index:auto/z-index:0
    * z-index > 0

---

前端页面文字超出一行，省略超出部分，显示’…’

    p{
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

---

文字超过三行就显示省略号：

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

---

空心三角箭头：

<span class="arrow"></span>

.arrow:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}