1（跨浏览器兼容）：

Question

我正在尝试创建一个类似于此网站的网页：

http://dribbble.com/shots/805937-Minimalist-invoice

我需要将设计设为静态的概述：我正在尝试创建一个与电子商务网站具有相同概念的网站。因此，每次我更新列表中的新项目时，它都会显示在表格中，依此类推。

我尝试使用photoshop创建一个带有该设计的图像（中间的那个带有白色背景和顶部和底部的尖边），但结果是图像是静态的，并且当内容为页面改变了。

我不知道是否可以使用纯HTML代码自定义边框来实现设计。

我尝试使用CSS的图像边框属性，但边缘上仍然有水平边框。我还使用了背景图像属性，但结果是它是静态的，并且当项目中的更新发生更改时不会更改。

感谢您的帮助。

Answer 1

结帐this answer。它使用linear-gradients来产生这种效果。

我已根据您的问题稍微更新了一下

<强> FIDDLE

Answer 2

如果您不关心丢失对旧版浏览器的支持，请尝试使用CSS3 border-image属性：

http://css-tricks.com/understanding-border-image/

请参阅何时可以使用浏览器支持： http://caniuse.com/#feat=border-image

否则，您可以为表格的thead和tfooter元素添加背景（尚未尝试过，但这应该有效）。如果仍然没有运气，请尝试在table元素之前和之后添加一个额外的元素，并为它们添加背景。

Answer 3

我会做类似的事情：

HTML：

<div class="invoice">
    <div class="topEdge">
    </div>
    <div class="invoiceContent">
        <!--prices or whatever markup you want-->
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
    </div>
    <div class="bottomEdge">
    </div>
</div>

的CSS：

.invoice {
    width: 400px;
}

.topEdge {
   height: 20px;
   background: red; /* replace red with your top edge background image */
}

.bottomEdge {
   height: 20px;
   background: blue; /* replace blue with your top edge background image */
}

http://jsfiddle.net/KFTzc/

Answer 4

您可以通过两种方式解决此问题，包括:before和:after伪元素。

1（跨浏览器兼容）：

获取Z字形背景的片段，然后沿着x轴重复您想要Z字形边框的元素的:before和:after伪元素。例如：

.zig-zag-element:after{
    content: ' ';
    width: 100%;
    display: block;
    background: url('/path/to/zig-zag.png') repeat-x;
}

2（CSS3渐变）：

如果您在背景上使用分层linear-gradient，请执行以下操作：

background: 
   linear-gradient(135deg, #FCFCFB 25%, transparent 25%),
   linear-gradient(225deg, #FCFCFB 25%, transparent 25%),
   linear-gradient(315deg, #8CCEE8 25%, transparent 25%) -7px 0,
   linear-gradient(45deg, #8CCEE8 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #DCDCDB;

结合:before和:after伪元素，您可以获得所需的结果。

查看此FIDDLE。

注意：该示例仅适用于webkit浏览器（因为我将其作为概念证明）。如果您需要其他浏览器支持，则需要添加多个背景属性并添加前缀。

使用锯齿形边缘自定义边框属性

4 个答案:

1（跨浏览器兼容）：

2（CSS3渐变）：