-1

Fab.com 的设计很棒，带有双虚线（水平和垂直）。

在“今日精选”一词上方，您可以看到其中一条水平虚线双线。使用萤火虫，我可以看到它位于 .

fab.com 如何设法创建这条线：使用 css 或 image ？如果是css，你用哪个属性创建这样的效果？

4

4 回答 4

2

这是一个图像：

#fabWrapper {
    background: url("//dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.png") repeat scroll 0 0 #FFFFFF;
}

小点填满了整个包装元素。然后页面上的子元素会覆盖所有内容，但它们之间会留下一些小边距，显示虚线背景。

于 2012-10-16T21:31:38.877 回答
1

如果你检查它的元素，你会发现它是一个设置为背景的图像：http: //dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.png

如果你想用 CSS 做到这一点，你可以使用“轮廓和边框”并给它们一个虚实线。或者使用两个 div 并给它们边框属性。

border:1px dotted #111;

于 2012-10-16T21:31:57.713 回答
1

您可以使用两条div虚线使用css

或者你可以image在 a 的 bg 中使用 adiv并repeat-y在css

于 2012-10-16T21:32:33.743 回答
1

他们将他们的容器设置为 //dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.png 在整个容器宽度上重复 2px 的填充。然后他们使用的每个部分，他们将背景设置为白色。如果您开始删除某些部分或将其中一个 div 设置为 background:none，您可以看到容器。

于 2012-10-16T21:37:31.010 回答