css 邊框

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 水平偏移 負值表示陰影在左側

    • v-shadow 垂直偏移 負值表示陰影在上方

    • blur 模糊距離

    • spread 擴張半徑

    • color 顏色

    • inset 外部陰影改成內部陰影

  • 一個正值的擴張半徑加上兩個爲零的偏移量以及爲零的模糊值

  • 支持逗號分隔語法,能夠建立任意數量的投影

  • 注意：box-shadow 是層層疊加的,第一層投影位於最頂層,依次類推

  • 投影的行爲跟邊框不徹底一致,由於它不會影響佈局,並且也不會 受到 box-sizing 屬性的影響，能夠經過內邊距或外邊距(這取決於投影是內嵌和仍是外擴的)來額外模擬出邊框所須要佔據的空間。

  • 建立出的假「邊框」出如今元素的外圈，並不會響 應鼠標事件,好比懸停或點擊。給 box-shadow屬性加上inset關鍵字,來使投影繪製在元素的內圈。 圖2-6 請注意,此時你須要增長額外的內邊距來騰出足夠的空隙。

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

• outline

  • 問題：只須要兩層邊框

  • 先設置一層常規邊框,再加上 outline(描邊) 屬性來產生外層的邊框

  • 經過 outline-offset 屬性來控制跟元素邊緣之間的間距,能夠接受負值(縫邊效果)

  • 邊框不必定會貼合 border-radius 屬性產生的圓角,所以若是元素是圓角的,它的描邊可能仍是直角的

邊框內圓角

問題：只要一個元素

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

• 描邊不會跟着元素圓角走，box-shadow 會

• 投影擴張值不能小於 (√2 −1)r，（r爲border-radius值）

連續圖像邊框

螞蟻行軍邊框

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