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

資訊專欄INFORMATION COLUMN

《CSS揭秘》-背景與邊框

tangr206 / 2851人閱讀

摘要：給一個(gè)容器設(shè)置一層白色背景和一道半透明白色邊框。思路實(shí)際是設(shè)置的背景會(huì)延伸到邊框所在的區(qū)域的下層，可以通過屬性調(diào)整背景的默認(rèn)行為。優(yōu)點(diǎn)邊框樣式十分靈活。缺點(diǎn)只適用于雙層邊框的場景邊框不一定會(huì)貼合屬性產(chǎn)生的圓角。

1.給一個(gè)容器設(shè)置一層白色背景和一道半透明白色邊框。

思路：實(shí)際是設(shè)置的背景會(huì)延伸到邊框所在的區(qū)域的下層，可以通過background-clip屬性調(diào)整背景的默認(rèn)行為。

background-clip 屬性：背景的繪制區(qū)域

值 描述
border-box 背景被裁剪到邊框盒
padding-box 背景被裁剪到內(nèi)邊距框
content-box 背景被裁剪到內(nèi)容框 
border: 20px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box;

2. 多重邊框?qū)崿F(xiàn)
box-shadow 方案

思路：利用box-shadow的第四個(gè)參數(shù)（擴(kuò)張半徑）指定正負(fù)值，讓投影面積加大或減小。一個(gè)正值的擴(kuò)張半徑加上兩個(gè)為零的偏移量以及為零的模糊值，得到的投影像一道實(shí)線邊框。優(yōu)點(diǎn)：可以獲得更多層邊框；貼合border-radius屬性產(chǎn)生圓角。缺點(diǎn)：只能描繪直線一種樣式。

box-shadow 屬性：向框添加一個(gè)或多個(gè)陰影。支持逗號(hào)分割語法，我們可以創(chuàng)建任意數(shù)量的投影。box-shadow是層層疊加的，第一層投影位于最頂層，依次類推。因此，需要按規(guī)律調(diào)整擴(kuò)張半徑。

值 描述
h-shadow 必需。水平陰影的位置。允許負(fù)值
v-shadow 必需。垂直陰影的位置。允許負(fù)值
blur 可選。模糊距離
spread 可選。陰影的尺寸
color 可選。陰影的顏色
inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影 
box-shadow: h-shadow v-shadow blur spread color inset;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .5);

注意：

投影的行為不會(huì)影響布局，也不會(huì)收到box-sizing屬性的影響。不過可以通過內(nèi)邊距或外邊距來額外模擬出邊框所需要占據(jù)的空間。

投影出現(xiàn)在元素的外圈，不會(huì)響應(yīng)鼠標(biāo)事件，比如懸停或點(diǎn)擊。你可以給box-shadow屬性加上inset關(guān)鍵字，使投影繪制在元素的內(nèi)圈，此時(shí)需要增加額外的內(nèi)邊距來騰出足夠的空隙。

outline 方案

思路：只需要兩層邊框，可以先設(shè)置一層常規(guī)邊框，再加上outline（描邊）屬性產(chǎn)生外層邊框。優(yōu)點(diǎn)：邊框樣式十分靈活。缺點(diǎn)：只適用于雙層邊框的場景；邊框不一定會(huì)貼合border-radius屬性產(chǎn)生的圓角。

outline屬性：是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

值 描述
outline-color 規(guī)定邊框的顏色
outline-style 規(guī)定邊框的樣式
outline-width 規(guī)定邊框的寬度 
background: yellowgreen;
outline: 5px solid deeppink;

設(shè)置box-radius值效果：

通過設(shè)置outline-offset屬性控制它與元素邊緣之間的距離

background: #485152;
outline: 1px dashed #fff;
outline-offset: -10px;

3. 針對容器某個(gè)角對背景圖片做偏移定位
background-position 的擴(kuò)展語法方案

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117293.html

相關(guān)文章

  • [CSS]《CSS揭秘》第二章——背景與邊框

    摘要：半透明邊框相關(guān)語法多重邊框方案需要注意的是，上面所創(chuàng)建的邊框是偽邊框，并不響應(yīng)鼠標(biāo)事件。方案以左上角為基準(zhǔn)。圖像邊框連續(xù)的圖像邊框?qū)傩砸?guī)定背景的繪制區(qū)域。 半透明邊框 border:10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box; showImg(htt...

    elina 評論0 收藏0

  • css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

    摘要：通過模糊來弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

    DevWiki 評論0 收藏0

  • CSS揭秘之《邊框圖像》

    摘要：如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標(biāo)簽，外層標(biāo)簽設(shè)置背景圖片，內(nèi)層標(biāo)簽設(shè)置背景色為白色就達(dá)到了效果，可是如果只用一層標(biāo)簽?zāi)兀趺崔k其實(shí)思路是在背景圖片之上，再疊加一層純白的實(shí)色背景代碼如下 如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

    Pikachu 評論0 收藏0

  • CSS揭秘之《邊框圖像》

    摘要：如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果可能最容易的方法就是兩層標(biāo)簽，外層標(biāo)簽設(shè)置背景圖片，內(nèi)層標(biāo)簽設(shè)置背景色為白色就達(dá)到了效果，可是如果只用一層標(biāo)簽?zāi)兀趺崔k其實(shí)思路是在背景圖片之上，再疊加一層純白的實(shí)色背景代碼如下 如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

    TalkingData 評論0 收藏0

發(fā)表評論

0條評論

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