成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

《CSS揭秘》-背景與邊框

tangr206 / 2937人閱讀

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

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

思路：實際是設(shè)置的背景會延伸到邊框所在的區(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的第四個參數(shù)（擴(kuò)張半徑）指定正負(fù)值，讓投影面積加大或減小。一個正值的擴(kuò)張半徑加上兩個為零的偏移量以及為零的模糊值，得到的投影像一道實線邊框。優(yōu)點：可以獲得更多層邊框；貼合border-radius屬性產(chǎn)生圓角。缺點：只能描繪直線一種樣式。

box-shadow 屬性：向框添加一個或多個陰影。支持逗號分割語法，我們可以創(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);

注意：

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

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

outline 方案

思路：只需要兩層邊框，可以先設(shè)置一層常規(guī)邊框，再加上outline（描邊）屬性產(chǎn)生外層邊框。優(yōu)點：邊框樣式十分靈活。缺點：只適用于雙層邊框的場景；邊框不一定會貼合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. 針對容器某個角對背景圖片做偏移定位
background-position 的擴(kuò)展語法方案

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.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揭秘) 知識點目錄，值得深入學(xué)習(xí)！

    摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細(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)?，怎么辦其實思路是在背景圖片之上，再疊加一層純白的實色背景代碼如下 如果我們想把一圖應(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其實思路是在背景圖片之上，再疊加一層純白的實色背景代碼如下 如果我們想把一圖應(yīng)用到邊框而非背景，就像下面的這樣效果 showImg(https://segmentfault.com/img/bVUhG5?w=194...

    TalkingData 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<