css揭秘 - 背景與邊框

半透明邊框

RGBA/HSLA顏色
H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度。取值0~1之間。

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box; // 瀏覽器會用內(nèi)邊距的外沿來把背景裁切掉

多重邊框

box-shadow接受第四個參數(shù)（稱作“擴(kuò)張半徑”），通過指定正值或負(fù)值，可以讓投影面積加大或者減小。一個正值的擴(kuò)張半徑加上兩個為零的偏移量以及為零的模糊值，得到的“投影”其實(shí)就像一道實(shí)現(xiàn)邊框。

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

不過 box-shadow 的好處在于， 它支持逗號分隔語法， 我們可以創(chuàng)建任意數(shù)量的投影。因此， 我們可以非常輕松地在上面的示例中再加上一道 deeppink 顏色的“邊框”

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

注：box-shadow是層層疊加的，第一層投影位于最頂層，以此類推，因此需要按照此規(guī)律調(diào)整擴(kuò)張半徑。比如說， 在前面的代碼中， 我們想在外圈再加一道 5px 的外框， 那就需要指定擴(kuò)張半徑的值15px(10px+5px)
加投影的box-shadow

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

outline（描邊）方案

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

可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距， 這個屬性甚至可以接受負(fù)值。只適用于雙層“邊框”的場景（若多層邊框則使用box-shadow）,邊框不一定會貼合 border-radius 屬性產(chǎn)生的圓角。

background: yellowgreen;
border: 10px solid #655;
border-radius: 10px;
outline: 1px dashed white;
outline-offset: -5px;

靈活的背景定位

background-position的擴(kuò)展
允許指定背景圖片距離任意角的偏移量，只要在偏移量前面指定關(guān)鍵字。跟右側(cè)保持20px的偏移量同時跟底部保持10px的偏移量如下：

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

回退方案

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

background-origin方案
將background-origin設(shè)置為content-box，會使偏移量跟padding的值相同。若有不同的，可以配合background-position的擴(kuò)展語法來設(shè)置額外的偏移量。

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

calc()方案
按照左上角思路來想，需要計(jì)算對左上角的偏移量，可以使用calc()計(jì)算相對于左上角的偏移量。

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

注：請不要忘記在calc()函數(shù)內(nèi)部的 - 和 + 運(yùn)算符的兩側(cè)各加一個空白符，否則會產(chǎn)生解析錯誤！

邊框內(nèi)圓角

難題
一個容器，只在內(nèi)側(cè)有圓角，而邊框或描邊的四個角在外部仍然保持直角的形狀。用兩個元素可以實(shí)現(xiàn)此效果。

<div class="something-meaningful"><div>
    I have a nice subtle inner rounding,
    don't I look pretty?
</div></div>

.something-meaningful {
    background: #655;
    padding: .8em;
}
.something-meaningful > div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
}

將box-shadow和outline結(jié)合使用，可以實(shí)現(xiàn)邊框內(nèi)圓角的效果。box-shadow的擴(kuò)張半徑要比描邊的寬度值小，但同時又要比(根號2-1)r大(r表示border-radius)

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

條紋背景

橫向條紋

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

垂直條紋

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

斜向條紋

background: linear-gradient(45deg,
                      #fb3 25%, #58a 0, #58a 50%,
                      #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

更好的斜向條紋

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

靈活的同色系條紋

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(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                  linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
                 10px 10px, 10px 10px;

波點(diǎn)

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
                  radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

波點(diǎn)的mixin代碼 -- SCSS

@mixin polka($size, $dot, $base, $accent) { 
    background: $base;
    background-image:
    radial-gradient($accent $dot, transparent 0),
    radial-gradient($accent $dot, transparent 0);
    background-size: $size $size;
    background-position: 0 0, $size/2 $size/2;
}

// 調(diào)用
@include polka(30px, 30%, #655, tan);

棋盤

background: #eee;
background-image:
    linear-gradient(45deg,
        rgba(0,0,0,.25) 25%, transparent 0,
        transparent 75%, rgba(0,0,0,.25) 0),
    linear-gradient(45deg,
        rgba(0,0,0,.25) 25%, transparent 0,
        transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

棋盤的mixin代碼 -- scss

@mixin checkerboard($size, $base,
            $accent: rgba(0,0,0,.25)) {
    background: $base;
    background-image:
        linear-gradient(45deg,
            $accent 25%, transparent 0,
            transparent 75%, $accent 0),
        linear-gradient(45deg,
            $accent 25%, transparent 0,
            transparent 75%, $accent 0);
    background-position: 0 0, $size $size,
    background-size: 2*$size 2*$size;
}
/* 調(diào)用時是這樣的…… */
@include checkerboard(15px, #58a, tan);

棋盤的svg實(shí)現(xiàn)代碼

<svg xmlns="http://www.w3.org/2000/svg"
    width="100" height="100" fill-opacity=".25" >
    <rect x="50" width="50" height="50" />
    <rect y="50" width="50" height="50" />
</svg>
<!-- 調(diào)用 -->
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" \
            width="100" height="100" \
            fill-opacity=".25">\
            <rect x="50" width="50" height="50" /> \
            <rect y="50" width="50" height="50" /> \
            </svg>');
background-size: 30px 30px;

請注意，如果你出于可讀性的考慮，需要把一句CSS代碼打斷為多行，只需要用反斜杠（\）來轉(zhuǎn)義每行末尾的換行就可以了。

偽隨機(jī)背景

解決方案

background: hsl(20, 40%, 90%);
background-image: 
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

使用質(zhì)數(shù)來指定各組條紋的寬度，增加各組條紋寬度的隨機(jī)真實(shí)性。相對質(zhì)數(shù)是一種數(shù)字之間的關(guān)系， 而不是單個數(shù)字自身的屬性。 構(gòu)成相對質(zhì)數(shù)的這些數(shù)字沒有公約數(shù)， 但它們自己是可以有多個約數(shù)的（ 比如說， 10 和 27 是相對質(zhì)數(shù)， 但它們都不是質(zhì)數(shù)）。 很顯然， 一個質(zhì)數(shù)跟其他所有數(shù)字都可以構(gòu)成相對質(zhì)數(shù)。

連續(xù)的圖像邊框

border-image的工作原理
基本上就是九宮格伸縮法： 把圖片切割成九塊， 然后把它們應(yīng)用到元素邊框相應(yīng)的邊和角。
解決方案

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
    url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

合并簡寫為：

padding: 1em;
border: 1em solid transparent;
background:
    linear-gradient(white, white) padding-box,
    url(stone-art.jpg) border-box 0 / cover;

也適用于漸變圖案，下面的可以實(shí)現(xiàn)一種老式信封樣式的邊框。

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg,
        red 0, red 12.5%,
        transparent 0, transparent 25%,
        #58a 0, #58a 37.5%,
        transparent 0, transparent 50%)
    0 / 5em 5em;

也可以使用border-image來實(shí)現(xiàn)。

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);

不過 border-image 方法存在一些問題。

  • 每當(dāng)我們改變 border-image-slice時，都需要同時修改borderwidth來讓它們相互匹配。
  • 由于我們不能在 border-image-slice 屬性中使用 em 單位， 只能把邊框厚度指定為像素單位。
  • 條紋的寬度需要在色標(biāo)的位置信息中寫好，因此我們在改變條紋寬度時， 需要修改四處。

    螞蟻行軍效果 
@keyframes ants { to { background-position: 100% } }
.marching-ants {
    padding: 1em;
    border: 1px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg,
            black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
    animation: ants 12s linear infinite;
}

頂部邊框的裁切效果，用來模擬傳統(tǒng)的腳注

border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
                currentColor 4em,
                transparent 0);
padding-top: 1em;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容