CSS高级技巧背景和边框

Posted 2021-01-14 gootter

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()函数一步到位，但需要注意在运算符的两侧各加一个空白符，此目的是为了向前兼容，以后可能会允许关键字的出现