正文

02--css背景与边框--css揭秘

IP云
IP云V管理员/5 阅读
09/14
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

背景与边框

一 半透明边框 rgba/hsla颜色

1.难题
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：

#border {
width:100px;
height:100px;
border: 10px solid hsla(0,0%,100%,.5);
background: white;
}

但实际上看不到边框，边框去哪儿了？

2.解决方案
尽管看起来并不像那么回事，但我们的边框其实是存在的。默认情况下，
背景会延伸到边框所在的区域下层。
在CSS 2.1 中，这就是背景的工作原理。
可以通过background-clip 属性来调整上述默认行为所带来的不便。

#border {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
}

二 多重边框

box-shadow的基本用法
1.难题
我们通常希望在CSS 代码层面以更灵活的方式来
调整边框样式。因此，网页开发者们最终不得不折腾出各种丑陋的hack，比
如使用多个元素来模拟多重边框。不过，我们还有更好的办法来解决这个难
题，并不需要添加无用的额外元素来污染我们的结构。

2.box-shadow 方案
box-shadow接受4个参数，第4个参数扩展半径
一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，
得到的“投影”其实就像一道实线边框

#border {
background:red;
box-shadow:0 0 0 10px #555;
}

唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶
层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代
码中，我们想在外圈再加一道5px 的外框，那就需要指定扩张半径的值为
15px（10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一
层常规的投影：

#border {
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}

多重投影解决方案box-shadow注意：

1> 投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会
受到box-sizing 属性的影响。不过，你还是可以通过内边距或外边
距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要
占据的空间。
2> 上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响
应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给
box-shadow 属性加上inset 关键字，来使投影绘制在元素的内圈。
请注意，此时你需要增加额外的内边距来腾出足够的空隙。

3.outline 方案
在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边
框，再加上outline（描边）属性来产生外层的边框。

#border {
background: yellowgreen;
border: 10px solid #655;
outline: 5px dashed deeppink;
outline-offset:;
}

你可以通过outline-offset 属性来控制它跟
元素边缘之间的间距，这个属性甚至可以接受负值。

outline 方案注意：
1> 它只适用于双层“边框”的场景，因为 outline 并不能
接受用逗号分隔的多个值。如果我们需要获得更多层的边框，前一
种方案就是我们唯一的选择了。
2> 边框不一定会贴合border-radius属性产生的圆角，因此如果元素
是圆角的，它的描边可能还是直角的。请注意，这种行为被CSS
工作组认为是一个bug，因此未来可能会改为贴合borderradius圆角。

三 灵活的背景定位

1.background-position 的扩展语法方案
背景与容器底部和右部距离

#bg {
background: url(img1.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px; /*扩展语法*/
}

2.background-origin 方案
background-origin属性指定了背景图像的位置区域 默认是padding-box
content-box, padding-box,和 border-box区域内可以放置背景图像

#bg {
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
}

3.calc() 方案
把背景图片定位到距离底边10px 且
距离右边20px 的位置。如果我们仍然以左上角偏移的思路来考虑，其实
就是希望它有一个100% - 20px 的水平偏移量，以及100% - 10px 的垂直
偏移量。

#bg {
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
}

四 边框内圆角

1.难题
有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外
部仍然保持直角的形状，如图2-15 所示。这是一个有趣的效果，目前还没
有被滥用。用两个元素可以实现这个效果，这并没有什么特别的：

.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}

有没有办法可以只用一个元素达成同样的效果呢？

2.解决方案

描边并不会跟着元素的圆角走
因此，如果我们把这两者叠加到一起，box-shadow
会刚好填补描边和容器圆角之间的空隙，
这两者的组合达成了我们想要的效果:

.something-meaningful {
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
}

到底多大的投影扩张值box-shadow可以填补这些空隙呢？
请注意，该计算过程揭示了这个方法的另一个限制：为了让这个效果得
以达成，扩张半径需要比描边的宽度值小，但它同时又要比( 2 −1)r大
（这里的r 表示 border-radius）。这意味着，如果描边的宽度比 ( 2 −1)r 小，
那我们是不可能用这个方法达成该效果的。

五 条纹背景

1.难题
不论是在网页设计中，还是在其他传统媒介中（比如杂志和墙纸等），
各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。要想在网页中实
现条纹图案，其过程还远远不够理想。通常，我们的方法是创建一个单独的
位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。可能有人
试过用SVG 来取代位图，但这样还是会有一个独立的文件，而且它的语法
也远远不够友好。如果可以直接在CSS 中创建条纹图案，那该有多棒啊！
你可能会惊讶地发现，我们居然真的可以。

2.解决方案 linear-gradient(#fb3,#58a)

#bg {
background: linear-gradient(#fb3, #58a);
}

如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，
过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那
个位置突然变化，而不是一个平滑的渐变过程
#bg {
background: linear-gradient(#fb3 50%, #58a 50%);
}
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

#bg {
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
}
/*多种颜色：*/
#bg {
background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0)
}

3.垂直条纹
垂直条纹的代码跟水平条纹几乎是一样的，差别主要在于：我们需要在
开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我们其
实也可以加上这个参数，只不过它的默认值to bottom 本来就跟我们的意
图一致，于是就省略了。最后，我们还需要把background-size 的值颠倒
一下，

#bg {
background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);
background-size: 30px 100%;
}

4.斜向条纹

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

5.更好的斜向条纹
我们还有更好的方法来创建斜向条纹。一个鲜为人知的真
相是linear-gradient() 和radial-gradient() 还各有一个循环式的加强
版：repeating-linear-gradient() 和repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直
到填满整个背景。下面是一个重复渐变的例子

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

6.灵活的同色系条纹

#bg {
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}

但我们现在只需要修改一个地方
就可以改变所有颜色了。我们还得到了一个额外的好处，对于那些不支持
CSS 渐变的浏览器来说，这里的背景色还起到了回退的作用。

六 复杂的背景图案
CSS 渐变在实现这些图案时也能大展拳脚。用CSS 渐变
来创建任何种类的几何图案几乎都是可能的，只不过有时这种方法不太实
际。

1.网格

七 伪随机背景

八 连续的图像边框