《css 揭秘》讀書筆記

OnlyMyRailgun 發布于2019-08-29 13:20 / 1009人閱讀

摘要：因為鮮為人知的第四個長度參數雙層投影毛玻璃效果見毛玻璃自定義復選框不多介紹，也有相關案例復選框滾動提示現在越來越多的移動端都是這樣處理，滾動提示其他揭秘對應的地址圖靈圖書在封底都提供優惠碼低價購買電子書她

目標

如何用 css 解決難題

收獲 盡量減少代碼重復

用相對值

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

// 應該改成
font-size: 20px;
line-height: 1.5;

相對值很多 em 和百分比

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

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

less做法是通過 lighten 或者 darken 設置一個值

darken(#428bca, 6.5%)

代碼容易維護和代碼量少不可兼得。

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

// 可讀性可維護上好很多
border-width: 10px;
border-left-width: 0;

合理使用簡寫

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

background: red;

background-color: red;

合理使用簡寫是一種良好的防衛性編碼方式，可以抵御未來的風險。

calc

calc 的 + - 兩側需要有空格

calc(100% - 10px); calc(100% + 10px)

連續的圖像邊框

老式信封

螞蟻行軍

橢圓

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

border-radius: 100px / 75px;

4分之一橢圓

border-radius: 100% 0 0 0;

平行四邊形

嵌套元素方案

偽元素方案

z-index: -1; 的使用很經典

切角

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

想加個角標，達到這個效果，需要再來一個linear-gradient，同時給不同的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;

投影

普遍認識的投影是

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

這讓大家誤解不能對單邊 box-shadow。因為鮮為人知的 第四個長度參數

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

雙層投影

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

毛玻璃效果

見毛玻璃

自定義復選框

不多介紹，weui 也有相關案例 weui 復選框

滾動提示

現在越來越多的移動端都是這樣處理，滾動提示

其他

《css揭秘》對應的github地址 https://github.com/cssmagic/C...

demo http://play.csssecrets.io/

圖靈圖書在封底都提供優惠碼低價購買電子書

她github https://github.com/LeaVerou

GPU云服務器云服務器讀書筆記編程思想讀書筆記大數據時代讀書筆記讀書計劃

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112529.html

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

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

Miyang 2019-08-30 12:59 評論0 收藏0
《css揭秘》讀書筆記

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

xiguadada 2019-08-29 16:28 評論0 收藏0
CSS技巧

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

DangoSky 2019-08-22 11:15 評論0 收藏0
CSS技巧

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

zgbgx 2019-08-29 14:01 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

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

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0