第二邊框元素

我需要做的第二邊界，而不使用圖像，所以我的想法是讓另一個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第一次工作，但不是第二次。爲什麼？任何建議的方式>

來源

2012-01-22 Itay Grudev

可怕：你可能不是在開玩笑的那個字幕標籤... – timoxley

你不能在CSS中做這樣的計算。第一條規則工作的唯一原因是因爲瀏覽器遇到語法錯誤，並且恢復爲默認設置。 A div元素的默認行爲是延伸到最大可用寬度。

對於title股，我會建議給.box a padding: 10px。

我不是100％清楚你想如何邊界，但我認爲你應該可以使用left: 2px; right: 2px; top: 2px; bottom: 2px或它的變體。

來源

2012-01-22 14:15:11

你是對的，但我需要關於如何縮小一點點的幫助.border –

@ItehnologicalDisexisting使用'left'，'right'，''頂部「和」底部「不起作用？問題是什麼？ –

其實top：0px; left：0px; bottom：0px; right：0px; –

你應該使用一個div，然後給它這個屬性outline: 1px solid #d6d6d6;。它會讓div看起來像在另一個內部......如果這就是你想要的。

來源

2012-01-22 14:25:29 IROEGBU

'outline'也是一個很好的解決方案，只要你知道它不會增加高度/寬度（這實際上是一件好事）。 –

......但不幸的是，「輪廓」沒有圓角支持。 –

寬度：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>

是的，我們都在c 0123那<marquee> - 也許你應該看看javascript solution;）

來源

2012-01-22 14:35:25

廢話。每個瀏覽器都知道把'Chuck Norris'解釋爲'1000％'。 –

@Pekka：它也處理顏色字體和背景。 Chrome的最新版本的默認樣式表實際上就是'Chuck Norris'。 –

你可以使用box-shadow或pseu做元素，創造出多個邊界：

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{ 
    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%不同。因此，如果您將margin-left: 10px添加到您的div中（無需聲明寬度），您將實際給予的寬度爲100％，減去10px的左邊距。

來源

2012-01-22 17:27:37

如果你想要一個雙邊框，爲什麼不把它設置在「border」屬性上？額外的div標記是沒有必要的。

就做這樣的事情：

border: 3px double #000;

此外，如果你想在你的CSS使用操作，看看使用CSS預處理程序一樣都不能少或SASS的能力。

來源

2012-01-23 15:41:33

第二邊框元素

回答

相關問題