CSS揭秘 背景與邊框

css編碼技巧

font-size

: 20px;
line-height
: 1.5;

border

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

background

: yellowgreen;
box-shadow
: 0 0 0 10px #655,
0 0 0 15px deeppink;

background

: yellowgreen;
border
: 10px solid #655;
outline
: 5px solid deeppink;

3. 靈活的背景定位

background

:url(code-pirate.svg) no-repeat bottom right #58a;
background-position
: right 20px bottom 10px;

padding

: 10px;
background
:url("code-pirate.svg") no-repeat #58a bottom right;
/* 或 100% 100% */
background-origin
: content-box;

background

:url("code-pirate.svg") no-repeat;
background-position
:calc
(100% - 20px)
calc
(100% - 10px)
;

4. 邊框內圓角

background

: tan;
border-radius
: .8em;
padding
: 1em;
box-shadow
: 0 0 0 .6em #655;
outline
: .6em solid #655;

5. 條紋背景

background

:linear-gradient
(#fb3 30%, #58a 0)
;background-size
: 100% 30px;

background

:linear-gradient
(to right, /* 或 90deg */ #fb3 50%, #58a 0)
;background-size
: 30px 100%;

background

:repeating-linear-gradient
(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px)
;

7. 偽隨機背景

8. 連續的影象邊框

《css揭秘》之背景與邊框

這本書是魔法哥的譯著，也是買了有很長時間了，現在開始慢慢閱讀，確實比較新穎，包含了很多css方面的小tips。來一點點的做個總結。關於半透明我們可能會想到使用rgba,opacity等等，對於背景提供回退方案還是比較好做的，要麼利用一張單畫素半透明，要麼回退到實色。但是對於其他屬性，比如邊框我們就只...

CSS揭秘 背景與邊框（2） 多重邊框

有些情況下，為了滿足一些要求，普通的邊框有點達不到我們的需求，這時我們可以使用多重邊框。box shadow屬性可以設定乙個或多個下拉陰影的框。語法 box shadow h shadow v shadow blur spread color inset 值 說明h shadow 必需的。水平陰影的...

02 css背景與邊框 css揭秘

背景與邊框 一 半透明邊框 rgba hsla顏色 1.難題 假設我們想給乙個容器設定一層白色背景和一道半透明白色邊框，body 的背景會從它的半透明邊框透上來。我們最開始的嘗試可能是這樣的 border 但實際上看不到邊框，邊框去哪兒了？2.解決方案 儘管看起來並不像那麼回事，但我們的邊框其實是存...