Question

我需要在不使用图像的情况下制作第二个边框，所以我的想法是在父版本中创建另一个div：

<div class="box news">
    <div class="title">{l_news}</div>
    <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee>
    <div class="border"></div>
</div>

我的css是：

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
}
.box div.title{
    clear: left;
    width: 100%-10px;
    height: 22px;
    padding-top: 2px;
}
.border{
    width: 100%-2px;
    position: absolute;
    top: 0px; left: 0px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #d6d6d6;
}

宽度：100％-10px 第一次工作，但不是第二次工作。为什么？任何关于＆gt;

的方法的建议

Answer 1

你不能在CSS中做这样的计算。第一条规则有效的唯一原因是浏览器遇到语法错误，并恢复为默认设置。 div元素的默认行为是拉伸到最大可用宽度。

对于title div，我建议您.box padding: 10px。

我并不是100％清楚你想要的边界，但我认为你应该能够使用left: 2px; right: 2px; top: 2px; bottom: 2px或其变体。

Answer 2

你应该使用一个div然后给它这个属性outline: 1px solid #d6d6d6;。如果这就是你想要的东西，它会让div出现在另一个内部。

Answer 3

宽度：100％-10px第一次工作但不是第二次工作。为什么呢？

它没有“工作”，忽略了无效的属性值。举个例子：

http://jsfiddle.net/gR4GF/1/

div {
    width: 50%;
    width: Chuck Norris;
}

宽度最终为50%。

无论如何，如果你想使用额外的标记添加额外的边框，不要使用<div></div>之类的空元素，而是换行 div中的元素：

http://jsfiddle.net/gR4GF/2/

<div class="box news">
    <div class="border">
        <div class="title">{l_news}</div>
        <marquee behavior="scroll" direction="left" loop="-1" scrollamount="3" scrolldelay="0">{news}</marquee>
    </div>
</div>

是的，我们都在考虑<marquee> - 也许你应该看看javascript solution;）

Answer 4

您可以使用box-shadow或pseudo元素创建多个边框：

http://css-tricks.com/snippets/css/multiple-borders/

使用：之前

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
}

.box:before {
   content: " ";
   position: absolute;
   z-index: -1;
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
   border: 2px solid #ffea00;
}

使用Box Shadow

.box{
    float: left;
    position: relative;
    margin: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 2px solid #9a9a9a;
    -moz-box-shadow: 0 0 0 #333;
    -webkit-box-shadow: 0 0 0 #333;
    box-shadow: 0 0 0 #333;
}

如何制作“100％ - 10px”

默认情况下，块级元素（例如div）占用其父元素的整个宽度。这与声明width: 100%不同。因此，如果你向你的div添加margin-left: 10px，（没有声明宽度），你将有效地给出100％宽度，减去10px左边距。

Answer 5

如果您想要双边框，为什么不在“边框”属性上设置它？额外的div标记不是必需的。

做这样的事情：

border: 3px double #000;

此外，如果您希望能够在CSS中使用操作，请查看使用像LESS或SASS这样的CSS预处理器。

第二个边框到元素

5 个答案: