半透明边框
border: 10px solid hsla(0,0%,100%,.5);
background: white;
因为background-clip默认为border-box所以无法实现半透明边框效果。
此时应改为padding-box即可实现效果。
多重边框
使用box-shadow实现。
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
值得注意的是这样实现的边框不会影响布局，不会响应鼠标悬停、点击等事件，但是你可以通过内边距或外边距来额外模拟出边框所需要占据的空间从而达到效果。
使用outline实现。
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
好处在于可用outline-offset 属性来控制它跟元素边缘之间的间距，且该方法更灵活，得到的边框实际存在。但只能实现2层边框。
灵活的背景定位
用background-position实现
background: url(code-pirate.svg)
no-repeat bottom right #58a; //其中bottom right是为了在不兼容background-position属性的浏览器显示
background-position: right 20px bottom 10px;
用background-origin实现（实现背景偏移量与容器的内边距一致）
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;
border box（边框的外沿框）padding box（内边距的外沿框）content box（ 内容区的外沿框）
用calc ( )实现
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
边框内圆角框
使用box-shadow和outline实现 (有限制 outline>box-shadow>border-radius*（根号2 - 1）)
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .34em #655;
outline: .6em solid #655;
条纹背景
水平条纹
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
标注：如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小， 则该色标的位置值会被设置为它前面所有色标位置值的最大值。
可通过这来设置不等宽的条纹。如background: linear-gradient(#fb3 30%, #58a 0);
设置3种颜色
background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
垂直条纹
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%