css 邊框

cgh1999520 發(fā)布于2019-08-30 15:52 / 3436人閱讀

摘要：創(chuàng)建出的假邊框出現(xiàn)在元素的外圈，并不會(huì)響應(yīng)鼠標(biāo)事件比如懸停或點(diǎn)擊。給屬性加上關(guān)鍵字來(lái)使投影繪制在元素的內(nèi)圈。圖請(qǐng)注意此時(shí)你需要增加額外的內(nèi)邊距來(lái)騰出足夠的空隙。

css 邊框 半透明邊框

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

多重邊框

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 水平偏移負(fù)值表示陰影在左側(cè)

v-shadow 垂直偏移負(fù)值表示陰影在上方

blur 模糊距離

spread 擴(kuò)張半徑

color 顏色

inset 外部陰影改為內(nèi)部陰影

一個(gè)正值的擴(kuò)張半徑加上兩個(gè)為零的偏移量以及為零的模糊值

支持逗號(hào)分隔語(yǔ)法,可以創(chuàng)建任意數(shù)量的投影

注意：box-shadow 是層層疊加的,第一層投影位于最頂層,依次類(lèi)推

投影的行為跟邊框不完全一致,因?yàn)樗粫?huì)影響布局,而且也不會(huì) 受到 box-sizing 屬性的影響，可以通過(guò)內(nèi)邊距或外邊距(這取決于投影是內(nèi)嵌和還是外擴(kuò)的)來(lái)額外模擬出邊框所需要占據(jù)的空間。

創(chuàng)建出的假“邊框”出現(xiàn)在元素的外圈，并不會(huì)響應(yīng)鼠標(biāo)事件,比如懸停或點(diǎn)擊。給 box-shadow屬性加上inset關(guān)鍵字,來(lái)使投影繪制在元素的內(nèi)圈。圖2-6 請(qǐng)注意,此時(shí)你需要增加額外的內(nèi)邊距來(lái)騰出足夠的空隙。

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

outline

問(wèn)題：只需要兩層邊框

先設(shè)置一層常規(guī)邊框,再加上 outline(描邊) 屬性來(lái)產(chǎn)生外層的邊框

通過(guò) outline-offset 屬性來(lái)控制跟元素邊緣之間的間距,可以接受負(fù)值(縫邊效果)

邊框不一定會(huì)貼合 border-radius 屬性產(chǎn)生的圓角,因此如果元素是圓角的,它的描邊可能還是直角的

邊框內(nèi)圓角

問(wèn)題：只要一個(gè)元素

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

描邊不會(huì)跟著元素圓角走，box-shadow 會(huì)

投影擴(kuò)張值不能小于 (√2 ?1)r，（r為border-radius值）

連續(xù)圖像邊框

螞蟻行軍邊框

@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;
}