背景知識:background-position擴充套件語法:css3 中background-position 語法可以通過在偏移量前指定關鍵字,來設定四條邊的偏移量。background-position
的擴充套件語法,background-origin,calc()
background-positon
: right 20px bottom 10px;
background-origin:css3 中 background-origin 可以指定背景的顯示範圍,預設以padding-box為準,即padding的外邊沿。此時背景的位置將和padding一致。通常此方案更適合開發需求。padding
:20px;
background-origin
: content-box;
background-position
: 100% 100%;
calc():允許填入 任意+ - * /
四則運算組合的表示式。background-position
:calc
(100% - 20px)
calc
(100% - 10px)
;
擴充套件:border-box
邊框
的外邊沿;padding-box
內邊距
的外邊沿;content-box
內容
的外邊沿。CSS揭秘 條紋背景
不管是線性漸變,還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中,以z方向堆疊的方式進行,也就是先指定的影象會在後指定的影象上面繪製,也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...
CSS揭秘之《條紋背景》
先來說說漸變吧 background linear gradient fb3 20 58a 80 效果圖如下所示 也就是說真正的漸變只出現在容器 60 從20 到80 的高度區域 如果把兩個色標合在一起,會怎樣呢 w3c是這樣規定的 如果多個色標具有相同的位置,它們會產生乙個無限小的過渡區域,過渡的...
CSS揭秘 背景與邊框
css編碼技巧 font size 20px line height 1.5 1.半透明邊框 border 10px solid hsla 0,0 100 5 background white background clip padding box 2.多重邊框 background yellowg...