来自《CSS揭秘》练习
第2个实例：多重边框
就是这个样子：
多重边框
单层的边框只要用border边框属性就可以实现
border: 10px solid #333;
image
多重边框要如何实现呢？
书中用两种方法实现
-
方法1
利用box-shadow
一般来说，我们了解这个box-shadow 属性，只是最基本的格式。
box-shadow: 6px 6px 10px #333;
实现的效果：
基本的阴影效果样式
box-shadow 的语法完整格式是：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 是水平的偏移量
v-shadow 是垂直的偏移量
blur 模糊距离
spread 阴影的大小
color 阴影的颜色
inset 阴影延伸方向 向内或者向外
而且重要的一点 box-shadow 属性的值是可以叠加的，只要你愿意加几层阴影都可以。
这样我们就有了基本的思路
如果偏移量不变，再禁止模糊，只改变阴影大小，我们就可以制造出来一个视觉上的双重边框
上面的图通过修改
box-shadow: 0 0 0 10px #333;
偏移量，模糊，都设置为0，阴影的大小10px
image
再加一层边框
box-shadow: 0 0 0 10px #333,
0 0 0 20px #999;
外层边框的阴影大小要比内层的大，才可以显示出来。
多重边框
当然可以继续加很多层，而且可以使用圆角属性（密集恐惧者，慎入）
image
换成彩虹的颜色，再把圆角属性加大
image
《CSS揭秘》这本书好就好在，可以让我们的思路无限放大
通过一些改造，只用一个<div>标签就可以画出彩虹旗（``跑题了～）
彩虹旗
-
方法2
利用 outline描边属性
如果想让边框有虚线、点状的效果，box-shadow 属性就做不到了。
我们用outline描边 属性就可以轻松的做到，而且一般情况下不需要加那么多的边框。两层就可以。
用outline实现的双重边框
css代码
background: #fc9a33;
border: 10px solid #eee;
outline: 10px solid #333;
solid 改为 dotted
尽管有些怪异，但是确实可以实现这样的效果
image
outline 还有个可以控制它偏移的属性 outline-offset
image
css 代码
background: #fc9a33;
border: 10px solid #eee;
outline: 10px solid #333;
outline-offset: -20px；
负值表示向内偏移，正值表示向外偏移
使用outline-offset这个属性的负值我们可以制作一些创意的图案
用outline实现的画框效果
简单的缝边效果
用outline实现简单的缝边效果
css代码
背景图选择一张有颜色的图就可以了。
border-radius: 10px;
outline: 3px dashed #eee;
outline-offset: -15px;
outline属性有个弊端，不能贴合边框的圆角。
image
具体要实现什么样的效果，可以根据实际情况而定。
以上就是多重边框的实现效果。
ps: 背景图片来自网络
网友评论