成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

elina / 695人閱讀

摘要：半透明邊框相關(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;

相關(guān)語法： 
    background-clip: border-box|padding-box|content-box;
多重邊框 box-shadow方案 
    box-shadow: 0 0 0 10px red,
                0 0 0 15px green,
                0 2px 5px 20px white;

*：需要注意的是，上面所創(chuàng)建的邊框是偽邊框，并不響應(yīng)鼠標(biāo)事件。

outline方案（僅可創(chuàng)建雙重邊框） 
    border: 5px solid red;
    outline: 10px solid green;

背景定位 background-position方案 
    background: url(2.jpg) no-repeat;
    width: 100%;
    height: 100%;
    background-position: right 10px bottom 10px;


*：只有background-image時(shí)，需要設(shè)置基礎(chǔ)大小，不然不會(huì)顯示，因?yàn)楸尘皥D片不會(huì)撐開div。

background-origin方案

background-position默認(rèn)是以padding-box為準(zhǔn)，通過background-origin可以設(shè)置為content-box。

calc方案 
background: url(2.jpg) no-repeat;
background-position: calc(100% - 10px) calc(100% - 10px);

*：calc以左上角為基準(zhǔn)。
**：calc里的加減運(yùn)算負(fù)前后必須有空格，這是為了向前兼容。

邊框內(nèi)圓角 
    color: white;
    background:black;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em red;
    outline: .6em solid red;

條紋背景 水平條紋 
background:linear-gradient(gray 30%,pink 70%);//漸變
background:linear-gradient(gray 30%,pink 30%);//不漸變

*：如果我們把第二個(gè)色標(biāo)的位置值設(shè)置為 0， 那它的位置就總是會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置值。

垂直條紋（重復(fù)） 
    background:linear-gradient(90deg,red 50%,blue 0);
    background-size:  50% 100%;

斜向條紋 
background:repeating-linear-gradient(60deg,#fb3 0px,#fb3 15px,#58a 15px,#58a 30px);//角度，條紋1的漸變顏色1 起點(diǎn)，條紋1的漸變顏色2 終點(diǎn)，條紋2的漸變顏色1 起點(diǎn)，條紋2的漸變顏色2 終點(diǎn)；

同色系條紋 
    background:#58a;
    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1),15px,transparent 0,transparent 30px);

復(fù)雜的背景圖案 網(wǎng)格 
    background:#58a;
    background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
    background-size: 30px 30px;

波點(diǎn) 
    background:#655;
    background:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);;
    background-size: 30px 30px;
    background-position: 0 0 ,15px 15px;

*：為了達(dá)到效果，第二層的偏移量必須為貼片寬度的一半。

圖像邊框 連續(xù)的圖像邊框 
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white,white),url(./2.jpg);
    background-size: cover;
    background-clip: padding-box,border-box;
    background-origin: border-box;

*：background-clip 屬性規(guī)定背景的繪制區(qū)域。

復(fù)古信封 
    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116791.html

相關(guān)文章

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

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

    DevWiki 評(píng)論0 收藏0

  • CSS揭秘之《靈活的背景定位》

    摘要：針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因?yàn)橹袑傩砸呀?jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字上面一 針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)20px偏移，底部10px偏移有如下幾種方式1、原理設(shè)置透明邊框 div { ...

    googollee 評(píng)論0 收藏0

  • CSS揭秘之《靈活的背景定位》

    摘要：針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)偏移，底部偏移有如下幾種方式原理設(shè)置透明邊框給指定值備注因?yàn)橹袑傩砸呀?jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字上面一 針對(duì)容器某個(gè)角對(duì)背景圖片做偏移定位現(xiàn)在就假設(shè)想針對(duì)容器右下角右側(cè)20px偏移，底部10px偏移有如下幾種方式1、原理設(shè)置透明邊框 div { ...

    RyanQ 評(píng)論0 收藏0

  • 《CSS揭秘》-背景與邊框

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

    tangr206 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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