来自《CSS揭秘》练习
第2个实例:多重边框
就是这个样子:
单层的边框只要用border边框属性就可以实现
border: 10px solid #333;
多重边框要如何实现呢?
书中用两种方法实现
-
方法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
再加一层边框
box-shadow: 0 0 0 10px #333,
0 0 0 20px #999;
外层边框的阴影大小要比内层的大,才可以显示出来。
当然可以继续加很多层,而且可以使用圆角属性(密集恐惧者,慎入)
换成彩虹的颜色,再把圆角属性加大
《CSS揭秘》这本书好就好在,可以让我们的思路无限放大
通过一些改造,只用一个<div>标签就可以画出彩虹旗(``跑题了~)
-
方法2
利用 outline描边属性
如果想让边框有虚线、点状的效果,box-shadow 属性就做不到了。
我们用outline描边 属性就可以轻松的做到,而且一般情况下不需要加那么多的边框。两层就可以。
css代码
background: #fc9a33;
border: 10px solid #eee;
outline: 10px solid #333;
solid 改为 dotted
尽管有些怪异,但是确实可以实现这样的效果
outline 还有个可以控制它偏移的属性 outline-offset
css 代码
background: #fc9a33;
border: 10px solid #eee;
outline: 10px solid #333;
outline-offset: -20px;
负值表示向内偏移,正值表示向外偏移
使用outline-offset这个属性的负值我们可以制作一些创意的图案
简单的缝边效果
css代码
背景图选择一张有颜色的图就可以了。
border-radius: 10px;
outline: 3px dashed #eee;
outline-offset: -15px;
outline属性有个弊端,不能贴合边框的圆角。
具体要实现什么样的效果,可以根据实际情况而定。
以上就是多重边框的实现效果。
ps: 背景图片来自网络