CSS高级技巧（二）背景和边框

标签：设置   no-repeat   支持   多个   position   逗号   pad   cal   一个   

box-shadow

box-shadow属性支持多个阴影，用逗号分隔

使用inset时，需要同时增加相应的内边距

边框内圆角的实现可以用该属性配合outline来实现，因为box-shadow时贴着圆角的，而outline显示为直角，此方案可能会在以后的提案中不可行

outline

可以实现boxshadow无法实现的其他样式的边框

可以通过内置负值的outline-offset在元素内部实现一个虚线或其他样式的边框

background-position

可以指定具体方向上的偏移量，但同时也需要注意提供回退方案

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

background-origin

改变背景图片展示的盒子，默认是padding-box，可以改为content-box或者border-box

calc()

在设置背景图片的展示边距时，可以通过calc()函数一步到位，但需要注意在运算符的两侧各加一个空白符，此目的是为了向前兼容，以后可能会允许关键字的出现

CSS高级技巧（二）背景和边框

标签：设置   no-repeat   支持   多个   position   逗号   pad   cal   一个   

原文地址：https://www.cnblogs.com/goOtter/p/9840257.html