0

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

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

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

我尝试使用 Photoshop 使用该设计创建图像（中间的图像具有白色背景和顶部和底部的尖边），但结果是图像是静态的，并且在页面内容更改时不会动态更改.

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

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

感谢所有的帮助。

4

4 回答 4

2

看看这个答案。它linear-gradients用来产生这种效果。

我已对其进行了一些更新以适合您的问题

小提琴

于 2013-07-03T17:03:11.910 回答
0

如果您不在乎失去对旧浏览器的支持，请尝试 CSS3border-image属性：

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

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

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

于 2013-07-03T16:42:48.917 回答
0

我会做类似的事情：

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/

于 2013-07-03T17:09:29.540 回答
0

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

1（跨浏览器兼容）：

获取锯齿形背景的片段，然后在您想要锯齿形边框的元素的伪元素中:before沿x 轴重复它。:after例如：

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

2（CSS3渐变）：

如果你linear-gradient像这样在背景上使用 layered s：

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 浏览器（因为我将其作为概念证明）。如果您想要其他浏览器支持，您需要添加多个背景属性并添加前缀。

于 2013-07-03T18:28:08.920 回答