-4

我试图了解这个网页： http: //www.canadianliving.com/food/slow_cooker_beef_stew.php

它分为几个部分，每个部分周围都有一个边框。例如，标题“Slow-Cooker Beef Stew”的右侧是“tested until perfect”的图像。紧靠其右侧的是边框，将其与广告分开。此边框向下延伸并将该部分与下面的“相关内容”部分分开。

但是什么是边界？我正在使用 Chrome 的 Inspect Element，Computed Style，但所有标签似乎都没有边框样式。还有什么可以创建边界？

（我不是在寻找制作边框的最佳方法；我需要了解其他页面是如何做到的。）

编辑：根据人们的回答，我尝试了下面的 html，但它不起作用。我不明白父 div 中的图像如何在每个子 div 中重复，以使其完全符合边界。

<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >

  <div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>

  <div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>

</div>
4

3 回答 3

1

http://www.canadianliving.com/media/images/background_02.png?201206051535

它是图像，而不是边框​​，删除图像以摆脱“边框”。

我通过选择容器元素并查看 css 背景属性来推断这一点，以供将来参考。

这里有一个例子：

<style>

    div#test {

        height:800px;
        width:800px;
        background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
    }
</style>

<div id="test">TestDiv<div>

请记住，这是它应该是什么样子的粗略草图。我不打算不费吹灰之力地向你学习这个。尝试 w3schools 获取 html / css 教程。

我敢打赌，在尝试提交此类论坛之前，我们都进行了此类研究并进行了很多尝试。

快乐的编码，祝你好运！

D.

于 2012-06-12T12:31:43.363 回答
0

基本上，它是一个用作阴影边框的背景 url。请查看#content_containerfirebug/chrome 检查元素中的 CSS。

它不是边界，而是用作分隔符。

于 2012-06-12T12:32:07.327 回答
0

背景设置在div#right_col广告所在的位置。它们有一个padding-left8px （阴影背景图像的宽度）和一个background.content-containerurl('/media/images/background_02.png') 0 630px repeat-y

于 2012-06-12T12:34:25.907 回答