CSS黑魔法——css实现内部边框

我们在写网站代码的时候,有时候会遇到一些奇葩的图层结构,下面要说的是内部边框这种:

看到这种图形,大多数第一反应的是用border,两个div实现,这种最基本的就不多说了,

那我们如果再提一个要求,只允许一个div,或者说只允许一个层级呢?

NO.1  利用css的盒子阴影即box-shadow

css代码{width: 200px;height: 100px;background-color: #000;border: 1px dashed #fff;box-shadow:0px 0px 0px 5px #000; margin-top: 20px;}

NO.2  利用css的描边属性(outline)

css代码{width: 200px;height: 100px;background-color: #000;border: 1px dashed #fff;outline: 5px solid #000;}

NO.3 利用css的描边(这里没有用到css的border属性,而是用到了css的轮廓偏移属性)

css代码{ width: 200px;height: 100px;background-color: #000; outline: 1px dashed #fff;outline-offset: -10px;}

其实综上,1和2都用到了border这一属性,而2和3都用到了outline的这一属性,相对3而言,其实就是描边在给他加了个偏移,想内部偏移了几个像素。

demo演示:http://blog.retechs.cn/demo/nbbk/

下面听首歌放松一下吧

00:00/00:00

点赞

发表评论