---
tags: Css
---
# CSS 常用樣式
###### tags: `css`

## 小技巧
https://markodenic.com/css-tips/

## 文字溢位
https://www.mdeditor.tw/pl/pa0h/zh-tw

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /*行數*/
    overflow: hidden;
}

## FAQ頁籤
#### bootstrap 3.3.1
### html

<div class="yl-faq">
    <div id="accordion" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="collapsed"
                        href="#collapse1">What kind of wire to use with  Twisted Pair Transmission products?</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Use UTP (unshielded twisted pair) CAT 5 24 AWG (or over) to have the best transmission quality
                        performance. To use STP (shielded twisted pair) cable, the shielded would cause internal signal
                        interference, so the transmission range would be shorter (1.5KM---&gt;0.8KM) than UTP cable.</p>
                    <p>Un-twisted wire not to be recommended, which easy have interference and range would be shorter.
                    </p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="collapsed"
                        href="#collapse2">Can RJ11 ordinary telephone wire be used with  Twisted Pair
                        Transmission products?</a></h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Yes,  Video Transceivers could use ordinary telephone wire to transmit and the range up
                        to 300 meters. But the interference would occur easily, therefore we do not recommend this
                        solution unless special environment requested.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" class="collapsed"
                        href="#collapse3">Can Category 6 wire be used with  Twisted Pair Transmission
                        products?</a></h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Yes, Use category 6 twisted pair wire, the range would be longer and have highly interference
                        immunity.</p>
                </div>
            </div>
        </div>
    </div>
</div>

### Scss

.panel-default>.panel-heading {

            a {
                font-weight: 500;
                color: $main-color;
                padding-left: 30px;
                padding-right: 30px;
                line-height: 1.4;
                position: relative;

                &::after {
                    content: "";
                    background: url(../images/icon/minimize.svg) no-repeat;
                    width: 15px;
                    height: 15px;
                    border: 1px solid $main-color;
                    display: block;
                    float: right;
                    position: absolute;
                    right: 0;
                    top: 15px;
                    transform: translateY(-50%);
                }

                &.collapsed::after {
                    content: "";
                    background: url(../images/icon/plus.svg) no-repeat;
                    width: 15px;
                    height: 15px;
                    border: 1px solid $main-color;
                    display: block;
                    float: right;
                    position: absolute;
                    right: 0;
                    top: 15px;
                    transform: translateY(-50%);
                }
            }

---
ios 的電話會自動加入a 連結，要寫下方文字才不會自動轉換

<meta name="format-detection" content="telephone=no">

---
若flex wrap在IE無法使用時可以width。

---
固定圖片比例：依照父元素的寬度比例計算padding-bottom

.thumbnails>.catelist .listimg>a {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

.thumbnail a>img, .thumbnail>img {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}