[读书笔记] CSS揭秘-背景与边框

最新推荐文章于 2023-06-02 11:37:55 发布

转载最新推荐文章于 2023-06-02 11:37:55 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/philipding/p/9722007.html

本文深入探讨CSS3的高级应用，包括半透明边框、多重边框、灵活的背景定位、复杂的背景图案等技巧，以及如何利用repeating-linear-gradient()创建各种条纹背景，通过叠加渐变图案创建复杂图案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

半透明边框

默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip属性调整该默认行为。

border: 10px solid rgba(0,0,0,.2)
background: blue;
background-clip: padding-box;

多重边框

box-shadow

box-shadow支持逗号分隔语法，可以创建任意数量的投影。

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px red;

需要注意：

只能实线框
不影响布局，不受box-sizing影响，可以通过margin或者padding来模拟边框所要占据的控件
box-shadow模拟的边框在元素的外圈，不会响应事件。如果需要响应事件的话，可以通过padding+inset来搞定。
```
background: yellowgreen;
padding: 20px;
box-shadow: 0 0 0 10px #655, 0 0 0 20px red;
```

outline

background: yellowgreen;
border: 10px solid #655;
outline: 10px solid red;

可以实现虚线边框，并且可以通过outline-offset控制outline与border之间的距离。但是需要注意：

只能实现双层边框
outline只支持直角，所以如果元素设置border-radius时，outline并不会贴合border-radiu圆角

灵活的背景定位

background-position的扩展语法

background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #58a; /* 在此添加 right bottom 作为回退方案 */
background-position: right 10px bottom 20px;

background-origin方案

如果需要偏移量与内边距一致，可以通过设置background-origin来实现。

padding: 20px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #58a;
background-origin: content-box;

calc()方案

background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position: calc(100% - 10px) calc(100% - 10px); /* calc()函数内容的 - 和 + 运算符两侧需要有一个空白符，否则会产生解析错误 */

边框内圆角

基于两个条件：

outline不会跟着元素的圆角走
box-shadow会跟着元素的圆角走(√2-1)r大。（r是border-radius)

限制：box-shadow的扩张半径需要比描边的宽度值小，但它同时要比

background: ten;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

条纹背景

如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。

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

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

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

background:  linear-gradient(#fb3 33.33%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 30px;

垂直条纹

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

斜向条纹

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 43px 43px;

上述方法只适用于45°的斜向条纹。

linear-gradient()和radial-gradient()还各有一个循环式的加强版本：repeating-linear-gradient()和repeating-radial-gradient()，与前两者唯一的区别是：色标是无限循环重复的。

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

repeating-linear-gradient()可适用于任何角度

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

需要注意：不论角度如何，创建双色条时都需要四个色标。所以，最好用linear-gradient来创建水平、垂直条纹，用repeating-linear-gradient创建斜向条纹。

灵活的同色系条纹

可以将上最深的颜色作为背景色，同时将半透明白色的条纹叠加在背景色之上得到浅色条纹。

/* background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px); */
background: #58a;
background-image: repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 15px, transparent 0, transparent 30px);

复杂的背景图案

将多个渐变图案组合起来，让它们透过彼此的透明区域显示，就能创建复杂的背景图案。　　

网格

background: white;
background-image: linear-gradient(90deg, rgba(255,0,0,.5) 50%, transparent 0), linear-gradient(rgba(255,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

类似图纸辅助线的网格（网格中每个格子的大小可以调整，而网格线条的粗细保持固定）

background: #58a;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

将不同线宽、不同颜色的网格叠加起来

background: #58a;
background-image:
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

波点

background: #655;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

需要注意，第二层背景的偏移定位必须是tile宽高的一半。

棋盘

background: #eee;
background-image:
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;

background: #eee;
background-image:
    linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
    linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

上述只是提供一种思路，实现棋盘背景图案，使用svg会是一种更好的选择。

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;

更多CSS3图案库可以参考示例代码

伪随机背景

平铺的背景图案看起来有一些呆板，这是因为自然界中的事物都不是以无限平铺的方式存在的。

background: hsla(20, 40%, 90%);
background-image:
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

最顶层的贴片的重复规律最容易被察觉，所以尽量将平铺间距最大的贴片安排在最顶层。（上述例子中的 #fb3 )

为什么说是伪随机，是因为每隔一定距离就会重复一次，一个贴片的终点就是各层背景图案以不同间距重复数次后再次统一对齐的点，其实就是所有background-size的最小公倍数。所以，为了让最小公倍数最大化，这些数字最好是“相对质数”。同时为了增加随机性，甚至可以用质数来指定各组条纹的宽度。

所以说，想要模拟自然的随机效果，请使用质数作为循环单元。（蝉原则）

请点击查看所有示例代码

转载于:https://www.cnblogs.com/philipding/p/9722007.html