總結一些專案中遇到的css樣式，供以後查閱，持續更新。

1.控制文字以指定行數顯示，多餘部分以省略號代替。

.singleline{
    display: -webkit-box;       /*必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示*/
    -webkit-box-orient;         /*必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式*/
    text-overflow: ellipsis;    /*可以用來多行文字的情況下，用省略號“…”隱藏超出範圍的文字*/
    overflow : hidden;
    -webkit-line-clamp
 
: 1;      /*控制行數
    -webkit-box-orient: vertical;
}

2.在圖示右上角顯示數量提醒，類似微信未讀訊息。

.redpoint{ 
    height: 15px;width: 15px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 0.1em;
    color: #FFFFD0; /*調整數字的大小*/
    background: red;
    position: relative;
    top: -38
 
px;    /*通過控制與上右的距離實現在右上角*/
    right: -10px;
}

3.圓角卡片(以主背景為白色，圓角卡片為灰色為例)

.card-back{
    background-color:#f0f0f0;
    border-radius:10px;     /*控制圓角的弧度*/
}

4.所有元素共用樣式(以*作為標識)

*{
    font-family:Arial;      /*所有元素共用該字型樣式*/
}

5.使元素特立獨行，不使用所有元素的共用樣式(例如大家都是紅色的，只有我是藍色的)

*{
    color:red;
}
.mycss{
    colorable !important;   /*!important的優先順序最高*/
 

}