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