《css揭祕》讀書筆記

第一章 引言

css編碼技巧

在引言中，做者提到使用em與inherit來實現css代碼的簡潔與可維護性。可是根據本司機兩年的開發經驗來看，在實際開發中不多來使用em這個單位。如何用以及什麼時候去使用，仍是要根據實際開發需求來定吧，畢竟這兩個屬性都有必定的侷限性。

第二章 背景與邊框

半透明邊框

border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;

background-clip用來指定背景渲染區域

多重邊框

box-shadow方案

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .6);

box-shadow方案有一個缺點就是，shadow不佔實際位置，若是有懸浮之類的效果，須要設置相應的內邊距來解決這個問題。

outline方案

border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: 5px;

outline-offset控制偏移

背景定位

background-position擴展語法方案

background: url(example.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

在background屬性裏面設置背景位置作回退方案

background-origin方案

background-origin用來設定bgposition的基準，默認以padding-box爲準，能夠將它設置爲content-box、border-box來改變這一行爲。

calc方案

background-position: calc(100% - 20px) calc(100% - 10px);

條紋背景

水平條紋&垂直條紋&斜條紋

// 水平條紋
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

// 垂直條紋
background: linear-gradient(90deg, #fb3 50%, #58a 0);
background-size: 30px 100%;

// 斜條紋
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

// 同色繫條紋
background: #58a
                repeating-linear-gradient(30deg,
                    hsla(0, 0%, 100%, .1),
                    hsla(0, 0%, 100%, .1) 15px,
                    transparent 0,
                    transparent 30px
                    );

這裏面涉及一些知識點：

1. 若是多個色標具備相同的位置，他們會產生一個無限小的過渡區域，顏色會突變
2. 若是某個色標的位置值比整個列表中在它以前的色標位置都要小，則色標的位置會被設置爲前面全部位置值的最大值，因此這裏設置0會取前面的最大值。這麼寫的目的是減少魔法字符串的影響。
3. linear-gradient是css生成的圖形，做用於background-image屬性，能夠經過background-size來控制位置及大小。
4. linear-gradient有一個循環版：repeating-linear-gradient。

複雜的背景圖

網格&波點&棋盤&僞隨機背景

// 網格
            width: 400px;
            height: 300px;
            margin-top: 20px;
            background: #58a;
            background-image:
                linear-gradient(#fff 2px, transparent 0),
                linear-gradient(90deg, #fff 2px, transparent 0),
                linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
                linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
            background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

            // 波點
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background: #655;
            background-image: 
                radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;

            // 棋盤svg方案更優
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background: #eee;
            background-image: url('data:image/svg+xml,\
                <svg xmlns="http://www.w3.org/2000/svg" \
                width="100" height="100" \
                fill-opacity=".25">\
                <rect x="50" width="50" height="50" /> \
                <rect y="50" width="50" height="50" /> \
                </svg>');
            background-size: 30px 30px;
            
            // 僞隨機背景，使用質數增長僞隨機的真實性
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg, #fb3 11px, transparent 0),
                linear-gradient(90deg, #ab4 23px, transparent 0),
                linear-gradient(90deg, #655 41px, transparent 0);
            background-size: 41px 100%, 61px 100%, 83px 100%;

連續的圖像邊框

border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
                        url(example.jpg) border-box  0 / cover;
            
            /* Styling & enable resize */
            width: 21em;
            height: 6em;
            padding: 1em;

運用background-clips和background-origin屬性

虛線框&動態虛線框

.marching {
            width: 21em;
            height: 6em;
            margin: 2em auto;
            padding: 1em;
            border: 1px solid transparent;
            background:
                linear-gradient(#fff, #fff) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
                animation: ants 12s linear infinite;
        }

        @keyframes ants { to {background-position: 100%} }

邊框裁剪效果

.footnote {
    margin: 2em auto;
    border-top: .2em  solid transparent;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
}

第三章 形狀

橢圓

width: 20em;
height: 15em;
background: #f50;
border: 1px solid #ddd;
border-radius: 50% / 100% 100% 0 0;

border-radius能夠同時指定水平半徑和垂直半徑，兩組值使用/隔開

平行四邊形

.skew {
    position: relative;
    text-align: center;
    width: 5em;
    height: 1.6em;
}

.skew::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

菱形圖片

輔助元素實現

.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}

.picture > img {
    max-width: 100%;
    transform: rotate(-45deg scale(1.42));
}

圖片自己放大，在不支持的瀏覽器裏面能夠作到版本回退

clip-path版本兼容性很差

.polygon {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
}

.polygon:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

切角效果

width: 20em;
height: 15em;
margin: 2em auto;
background: #58a;
background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right, 
    linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;

弧形切角

width: 20em;
height: 15em;
margin: 2em auto;
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left;
background-size: 50% 50%;
background-repeat: no-repeat;

讀後感

這本書介紹了大量的css實現技巧，而且以css3偏多，對於兼容性無要求開發來講，有很大的借鑑價值，好比下圖這些梯形框，菱形框，就可使用css3來實現，減小圖片引用成本，並能夠增長按鈕的靈活性，好比我想加一個點擊效果，就只須要動幾行css，而無需再加圖片（體積）。因爲基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。

（圖片來源：鬥魚客戶端英雄聯盟官方賽事直播間掛件）

這本書對於本小開發來講，更多像一本工具類書籍，能夠常常翻閱查詢，溫故知新。觸類旁通？觸類旁通是不可能觸類旁通的，這輩子都不可能觸類旁通！