背景与边框

以下为与背景与边框相关比较有用的属性。

  • background-origin: 属性值有 border-box/padding-box/content-box。默认为 padding-box
  • background-clip: The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box. 属性值有 border-box/padding-box/content-box。默认值为 border-box

图片自适应

.demo {
  width: 200px;
  height: 100px;
  background-size: cover;
}

半透明边框

<style>
  body {
    background: black;
  }
  .translucent-border {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    background: white;
    background-clip: padding-box; /* 这个属性能让背景和边框分离 */
  }
</style>
<body>
  <div class="translucent-border"></div>
</body>

效果图

多重边框

  • 方案一: box-shadow
.demo {
  background: white;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
  • 方案二: outline

It seemd no way to set radius with outline.

.demo {
  background: white;
  border: 10px solid #655;
  outline: 5px solid deeppink;
}

背景定位

.demo {
  background-position: calc(100% - 20px) calc(100% - 10px) /* calc 里面的 -、+ 前后要各加个空格 */
}
  • 阅读到边框内圆角