解读钉子的“一个 Div 可以做到的 …”

categories:
- css

tags:
- ::before && ::after
- border-image
- box-shadow

有兴趣的可以去我的个人主页看看哦:psychola的博客

---

啦啦啦 psychola搬运工来啦，大家相信下图中大圆圆只用一个div就可以做到吗？
钉子 [“原文例子地址”](http://blog.dimpurr.com/one-div-css3-cd/）

答案肯定如你们所料是：可以的。

我和大家一样，一开始都觉得很不可思议，但如果你们参悟了css3的灵活性，说不定以后也能发现一些新奇的东东。然后这个例子是我从一个现在读高中的菊苣钉子（dimpurr）博客看到的，原文例子在14年1月写的把 很早看到的啦，个人很喜欢也很佩服他的奇思妙想和一些ui 设计。图为他个人简介页面的部分截图，而他的blog “钉子の次元”大家可以去逛逛，github上有他设计的wordpress博客主题下载哦~~（我没在打广告= =

废话不说 开始解读一下怎么实现的把
一般人一个div可以很简单地写成下面这样（用下border && box-shadow就可以了）

但钉子这么巨大的光盘一样的东东是怎么做到的呢？

其实就像玩乐高玩具一样，由以下几个积木拼成的：

• ::before && ::after
• border-image
• border
• box-shadow

在说积木之前先提两个下几个自己不怎么常用但钉子例子里用到的css属性：

1. white-space （设置如何处理元素内的空白）
2. word-wrap （是否允许长单词或 URL 地址换行到下一行）

钉子的具体使用如下图：

科普结束，同时，如上图所示用到了伪元素::before和::after,其中::before代码如下。

div::before {content: "Bakemonogatari";width: 500px;position: absolute;top: -110px;left: 50%;margin-left: -250px;color: #FFF;text-align: center;font-size: 50px;font-weight: bold;font-family: "Times New Roman", serif;text-shadow: 0 0 40px #000, 0 -1px 0 #F3F3F3, 0 -2px 0 #F3F3F3;}

同理，那段文字”DimWorks CopyRight © TwentyThirteen\AOriginal Sound Track\AProundly Based on Html5 & Css 3”是通过伪元素::after实现的。

光盘的四个小正方形钉子是用border-image实现的, linear-gradient描绘border背景。钉子说“四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟，在别的内核下貌似没有效果。“

效果和代码请见下文

border-image: -webkit-linear-gradient( rgba(255, 255, 255, 0.3) , rgba(255, 255, 255, 0.3) );//表示四个角每个角的颜色从上至下颜色由rgba(255, 255, 255, 0.3) 像rgba(255, 255, 255, 0.3)渐变。

再举个border-image栗子

.a｛width: 200px;margin: 0 auto;height: 200px;border-width: 3px;border-style: solid;-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#fff)) 1 100%;-webkit-border-image: -webkit-linear-gradient(#000, #fff) 1 100%;-moz-border-image:-moz-linear-gradient(#000, #fff) 1 100%;    -o-border-image:-o-linear-gradient(#000, #fff) 1 100%;border-image:linear-gradient(to bottom, #000, #fff) 1 100%;｝   

表示透明度由上向下从黑色到呈线性变化

其实border-image和background-image渐变相似：background-image:-webkit-gradient(type, x1 y1, x2 y2, from(开始颜色值), to(结束颜色值), [color-stop(偏移量小数, 停靠颜色值), …] );

计算时border包含在宽度里哦

box-shadow

p.s. 计算时不包含在宽度里哦
参数有水平位移 竖直位移 模糊 扩散 颜色 内外嵌（外为默认）
钉子水平无位移 有4个外嵌 2个内嵌。

box-shadow: 0 0 0 4px rgba(247, 247, 247, 0.53) , 0 0 0 200pxrgba(177, 30, 30, 0.81), 0 0 0 204px rgba(247, 247, 247, 0.67), 0 0 10px 204px rgba(0, 0, 0, 0.64), 0 0 0 60px rgba(27, 27, 27, 0.79)inset, 0 0 10px 60px rgba(0, 0, 0, 0.73) inset;

下图中数字表示第几个box-shadow

psychola搬运工完工领盒饭去啦，有问题可以指出，333333q~~