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

資訊專欄INFORMATION COLUMN

《css 揭秘》讀書筆記

OnlyMyRailgun / 1019人閱讀

摘要：因?yàn)轷r為人知的第四個(gè)長(zhǎng)度參數(shù)雙層投影毛玻璃效果見毛玻璃自定義復(fù)選框不多介紹，也有相關(guān)案例復(fù)選框滾動(dòng)提示現(xiàn)在越來越多的移動(dòng)端都是這樣處理，滾動(dòng)提示其他揭秘對(duì)應(yīng)的地址圖靈圖書在封底都提供優(yōu)惠碼低價(jià)購(gòu)買電子書她

目標(biāo)

如何用 css 解決難題

收獲 盡量減少代碼重復(fù)

1

用相對(duì)值

font-size: 20px;
line-height: 30px;

// 應(yīng)該改成
font-size: 20px;
line-height: 1.5;

相對(duì)值很多 em 和 百分比

2

假設(shè)有個(gè)按鈕 bg 顏色是 colorsA，讓 bg 變亮或變暗，可以把半透明的黑色和白色疊加到上面。這樣 bg 可隨時(shí)換都能達(dá)到變亮或變暗的目的。

background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent)

less做法是通過 lighten 或者 darken 設(shè)置一個(gè)值

darken(#428bca, 6.5%)

3

代碼容易維護(hù)和代碼量少不可兼得。

// 代碼量少，但可讀性可維護(hù)上差
border-width: 10px 10px 10px 0;

// 可讀性可維護(hù)上好很多
border-width: 10px;
border-left-width: 0;
合理使用簡(jiǎn)寫

前者是簡(jiǎn)寫，可以確保背景是 red。但如果是用展開式的單個(gè)屬性，那背景可能是一個(gè)漸變團(tuán)，一張毛的圖片或者其他任意東西。

background: red;

background-color: red;

合理使用簡(jiǎn)寫是一種良好的防衛(wèi)性編碼方式，可以抵御未來的風(fēng)險(xiǎn)。

calc

calc 的 + - 兩側(cè)需要有空格

calc(100% - 10px); calc(100% + 10px)
連續(xù)的圖像邊框

1

老式信封

2

螞蟻行軍

橢圓

1

border 可以多帶帶指定水平和垂直半徑

border-radius: 100px / 75px;

2

4分之一橢圓

border-radius: 100% 0 0 0;

平行四邊形

1

嵌套元素方案

2

偽元素方案

z-index: -1; 的使用很經(jīng)典

切角 
background: linear-gradient(-45deg, transparent 15px, #58a 0);

想加個(gè)角標(biāo)，達(dá)到這個(gè)效果，需要再來一個(gè)linear-gradient，同時(shí)給不同的linear-gradient 分配不同的 background-size。

background:
        linear-gradient(to top left, transparent 50%, rgba(0,0,0,.4) 0) 100% 100% no-repeat,
        linear-gradient(-45deg, transparent 20px, #58a 0);
    background-size: 2em 2em, auto;
投影

普遍認(rèn)識(shí)的投影是

box-shadow: 2px 3px 4px black;

這讓大家誤解不能對(duì)單邊 box-shadow。因?yàn)轷r為人知的 第四個(gè)長(zhǎng)度參數(shù)

box-shadow: 0px 3px 4px -4px black;

雙層投影

box-shadow: 5px 0 5px -5px black, -5px 0px 5px -5px black;

毛玻璃效果

見 毛玻璃

自定義復(fù)選框

不多介紹，weui 也有相關(guān)案例 weui 復(fù)選框

滾動(dòng)提示

現(xiàn)在越來越多的移動(dòng)端都是這樣處理，滾動(dòng)提示

其他

《css揭秘》對(duì)應(yīng)的github地址 https://github.com/cssmagic/C...

demo http://play.csssecrets.io/

圖靈圖書在封底都提供優(yōu)惠碼低價(jià)購(gòu)買電子書

她github https://github.com/LeaVerou

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112529.html

相關(guān)文章

  • css編碼技巧【css揭秘讀書筆記】

    摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號(hào)，那么同時(shí)需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比，需要根據(jù)具體情況來決定。 最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧 盡量減少代碼重復(fù) 在實(shí)踐中，代碼可維護(hù)性的最大要...

    Miyang 評(píng)論0 收藏0

  • 《css揭秘》讀書筆記

    摘要：但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用這個(gè)單位。由于基本都是一些實(shí)用性的技巧，我就不一一列舉了，建議自讀。很好很實(shí)用的一本書。 第一章 引言 css編碼技巧 在引言中，作者提到使用em與inherit來實(shí)現(xiàn)css代碼的簡(jiǎn)潔與可維護(hù)性。但是根據(jù)本司機(jī)兩年的開發(fā)經(jīng)驗(yàn)來看，在實(shí)際開發(fā)中很少來使用em這個(gè)單位。如何用以及何時(shí)去使用，還是要根據(jù)實(shí)際開發(fā)需求來定吧，畢竟這兩個(gè)屬性...

    xiguadada 評(píng)論0 收藏0

  • CSS技巧

    摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。 成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架 成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

    DangoSky 評(píng)論0 收藏0

  • CSS技巧

    摘要：技巧使你的更加專業(yè)這是上關(guān)于技巧的一篇譯文，另外你也可以在本項(xiàng)目看到原文。列舉了一些很實(shí)用的技巧，比如給空內(nèi)容的標(biāo)簽添加內(nèi)容，逗號(hào)分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學(xué)者更好的掌握排序算法的實(shí)現(xiàn)。 成為專業(yè)程序員路上用到的各種優(yōu)秀資料、神器及框架 成為一名專業(yè)程序員的道路上，需要堅(jiān)持練習(xí)、學(xué)習(xí)與積累，技術(shù)方面既要有一定的廣度，更要有自己的深度。 Java...

    zgbgx 評(píng)論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識(shí)點(diǎn)大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計(jì)算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會(huì)用到。會(huì)持續(xù)更新… 一、...

    Jonathan Shieber 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<