《css揭秘》讀書筆記

xiguadada 發(fā)布于2019-08-29 16:28 / 1645人閱讀

摘要：但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。

第一章引言 css編碼技巧

在引言中，作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護(hù)性。但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用，還是要根據(jù)實際開發(fā)需求來定吧，畢竟這兩個屬性都有一定的局限性。

第二章背景與邊框 半透明邊框

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

background-clip用來指定背景渲染區(qū)域

多重邊框

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不占實際位置，如果有懸浮之類的效果，需要設(shè)置相應(yīng)的內(nèi)邊距來解決這個問題。

outline方案

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

outline-offset控制偏移

背景定位 background-position擴(kuò)展語法方案

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

在background屬性里面設(shè)置背景位置做回退方案

background-origin方案

background-origin用來設(shè)定bgposition的基準(zhǔn)，默認(rèn)以padding-box為準(zhǔn)，可以將它設(shè)置為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
                    );

這里面涉及一些知識點：

如果多個色標(biāo)具有相同的位置，他們會產(chǎn)生一個無限小的過渡區(qū)域，顏色會突變

如果某個色標(biāo)的位置值比整個列表中在它之前的色標(biāo)位置都要小，則色標(biāo)的位置會被設(shè)置為前面所有位置值的最大值，所以這里設(shè)置0會取前面的最大值。這么寫的目的是減小魔法字符串的影響。

linear-gradient是css生成的圖形，作用于background-image屬性，可以通過background-size來控制位置及大小。

linear-gradient有一個循環(huán)版：repeating-linear-gradient。

復(fù)雜的背景圖 網(wǎng)格&波點&棋盤&偽隨機(jī)背景

            // 網(wǎng)格
            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方案更優(yōu)
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background: #eee;
            background-image: url("data:image/svg+xml,
                ");
            background-size: 30px 30px;
            
            // 偽隨機(jī)背景，使用質(zhì)數(shù)增加偽隨機(jī)的真實性
            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%;

連續(xù)的圖像邊框

            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;

運(yùn)用background-clips和background-origin屬性

虛線框&動態(tài)虛線框

.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 #ffffd;
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);
}

菱形圖片 輔助元素實現(xiàn)

.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實現(xiàn)技巧，并且以css3偏多，對于兼容性無要求開發(fā)來說，有很大的借鑒價值，比如下圖這些梯形框，菱形框，就可以使用css3來實現(xiàn)，減少圖片引用成本，并可以增加按鈕的靈活性，比如我想加一個點擊效果，就只需要動幾行css，而無需再加圖片（體積）。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。

（圖片來源：斗魚客戶端英雄聯(lián)盟官方賽事直播間掛件）

這本書對于本小開發(fā)來說，更多像一本工具類書籍，可以經(jīng)常翻閱查詢，溫故知新。舉一反三？舉一反三是不可能舉一反三的，這輩子都不可能舉一反三！

GPU云服務(wù)器云服務(wù)器讀書筆記編程思想讀書筆記大數(shù)據(jù)時代讀書筆記讀書計劃

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113763.html

發(fā)表評論

登陸后可評論

0條評論

xiguadada

男|高級講師

我要關(guān)注我要私信

TA的文章

Megalayer：多IP美國站群獨(dú)立服務(wù)器1350元/月起，香港站群服務(wù)器1650元/月起

閱讀 2631·2021-10-14 09:47
數(shù)據(jù)庫主機(jī)名是什么-數(shù)據(jù)庫那個是主機(jī)？

閱讀 4909·2021-09-22 15:52
實現(xiàn)加入購物車拋物線效果

閱讀 3355·2019-08-30 15:53
如何優(yōu)化你的超大型React應(yīng)用【原創(chuàng)精讀】

閱讀 1427·2019-08-30 15:44
前端每日實戰(zhàn)：132# 視頻演示如何用純 CSS 創(chuàng)作一只思考的手

閱讀 669·2019-08-29 16:41
《css揭秘》讀書筆記

閱讀 1646·2019-08-29 16:28
[CSS]CSS Position 詳解

閱讀 438·2019-08-29 15:23
小程序入口構(gòu)造工具&二維碼測試工具

閱讀 1618·2019-08-26 12:20

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

《css揭秘》讀書筆記

相關(guān)文章