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

最新推荐文章于 2025-04-11 00:04:31 发布

weixin_30407613

最新推荐文章于 2025-04-11 00:04:31 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goOtter/p/9840257.html

本文深入探讨了CSS中box-shadow、outline、background-position等属性的高级应用，包括多重阴影、内边距调整、背景图片定位及展示区域控制。通过具体实例展示了如何利用这些属性创建复杂的视觉效果，如条纹背景、伪随机背景以及内嵌SVG文件。

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

实现条纹背景

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

对于现代浏览器来说，我们可以把 SVG 文件以 data URI 的方式内嵌到样式表中，甚至不需要用 base64 或 URLencode 来对其编码:

background: #eee url('data:image/svg+xml,\
 <svg xmlns="http://www.w3.org/2000/svg" \
 width="100" height="100" \
 fill-opacity=".25">\
 <rect x="50" width="50" height="50" /> \
 <rect y="50" width="50" height="50" /> \
 </svg>');
background-size: 30px 30px;

伪随机背景

通过质数来增加随机性

图片边框的实现

background配合background-clip配合size:cover配合origin

转载于:https://www.cnblogs.com/goOtter/p/9840257.html