背景与边框

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

  • 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 里面的 -、+ 前后要各加个空格 */
}
  • 阅读到边框内圆角