background-clip:padding-box(背景颜色被裁剪到内边距框)/border-box(背景颜色被裁剪到边框盒)/content-box(背景颜色被裁剪到内容框);
半透明边框的代码
<!doctype html>
<html>
<head>
<title>半透明边框</title>
<meta charset="utf-8">
<style>
body{
background:pink;
}
#a1{
margin:0 auto;
width:300px;
height:100px;
border:1em solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;
font-size: 2em;
text-align: center;
line-height: 3em;
}
</style>
</head>
<body>
<div id="a1">永远开心</div>
</body>
</html>box-shadow:0 0 0 10px #655,0 0 0 15px deeppink;
box-shadow层层叠加，第一层投影位于最顶层。扩张半径要调整
outline-offset可以接受负值。
background-position:right 20px bottom 10px;
如果不支持该语法，可以提供一个回退方案
即background:url(code-pirate.svg) no-repeat bottom right #58a;
background-origin:padding-box(背景图像行对于内边框来定位)/border-box（背景图形相对于边框盒来定位）/content-box(背景图像相对于内容框来定位)
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
