《css揭秘》实例练习--02多重边框

来自《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揭秘》这本书好就好在，可以让我们的思路无限放大

通过一些改造，只用一个

标签就可以画出彩虹旗（``跑题了～）

彩虹旗

• 方法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: 背景图片来自网络