《css 揭祕》讀書筆記

目標

如何用 css 解決難題

收穫

儘可能減小代碼重複

1

用相對值

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

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

相對值不少 em 和 百分比

2

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

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

less作法是經過 lighten 或者 darken 設置一個值

darken(#428bca, 6.5%)

3

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

// 代碼量少，但可讀性可維護上差
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)

連續的圖像邊框

1

老式信封

2

螞蟻行軍

橢圓

1

border 能夠單獨指定水平和垂直半徑

border-radius: 100px / 75px;

2

4分之一橢圓

border-radius: 100% 0 0 0;

平行四邊形

1

嵌套元素方案

2

僞元素方案

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