使用不同顏色的雙邊框

Question

使用Photoshop，我可以將兩個不同的邊框放到具有兩種不同顏色的元素上。因此，我可以用我的元素創造出許多動態的陰影效果。即使使用Photoshop效果，我也可以使用陰影和內陰影進行管理。

關於網頁設計的問題，如果我的設計像下面的圖片那樣，我該如何用CSS實現？真的有可能嗎？

注：我給二邊界的白色元素：外邊框爲白色，內部邊界是灰色。他們一起創造出一種動感的外觀，讓它感覺像是一個鑲嵌元素，而白色元素則是枕頭壓花。所以有一點：

div.white{ 
    border: 2px solid white; 
    border: 1px solid grey; 
} 

但是你知道這是一個雙重聲明，並且是無效的。那麼我怎樣才能在CSS中管理這樣的事情？

如果我把border-style: double那麼你知道我不能通過兩個不同的顏色爲單獨的double邊框。

div.white{ 
     border: double white grey; 
} 

此外，我熟悉LESS CSS預處理器。因此，如果使用CSS預處理器可能會發生這種情況，請告訴我。

Answer 1

或者，你可以使用僞元素這樣做:)僞元素的解決方案的好處是，你可以用它來空間內邊框距實際邊框任意距離，背景將通過該空間顯示。標記：

body { 
 
    background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); 
 
    background-repeat: no-repeat; 
 
    height: 100vh; 
 
} 
 
.double-border { 
 
    background-color: #ccc; 
 
    border: 4px solid #fff; 
 
    padding: 2em; 
 
    width: 16em; 
 
    height: 16em; 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 
.double-border:before { 
 
    background: none; 
 
    border: 4px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
    right: 4px; 
 
    bottom: 4px; 
 
    pointer-events: none; 
 
}

<div class="double-border"> 
 
    <!-- Content --> 
 
</div>

如果你想要的是連續彼此（它們之間沒有空格），您可以使用多個box-shadow聲明（用逗號分隔），這樣做的邊界：

body { 
 
    background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); 
 
    background-repeat: no-repeat; 
 
    height: 100vh; 
 
} 
 
.double-border { 
 
    background-color: #ccc; 
 
    border: 4px solid #fff; 
 
    box-shadow: 
 
    inset 0 0 0 4px #eee, 
 
    inset 0 0 0 8px #ddd, 
 
    inset 0 0 0 12px #ccc, 
 
    inset 0 0 0 16px #bbb, 
 
    inset 0 0 0 20px #aaa, 
 
    inset 0 0 0 20px #999, 
 
    inset 0 0 0 20px #888; 
 
    /* And so on and so forth, if you want border-ception */ 
 
    margin: 0 auto; 
 
    padding: 3em; 
 
    width: 16em; 
 
    height: 16em; 
 
    position: relative; 
 
}

<div class="double-border"> 
 
    <!-- Content --> 
 
</div>

Answer 2

試試下面的結構用於應用雙色邊框，

<div class="white"> 
    <div class="grey"> 
    </div> 
</div> 

.white 
{ 
    border: 2px solid white; 
} 

.grey 
{ 
    border: 1px solid grey; 
} 

Answer 3

我使用大綱交流ss 2屬性，簡單地工作。檢查了這一點，很簡單，甚至簡單的動畫：

.double-border { 
 
    display: block; 
 
    clear: both; 
 
    background: red; 
 
    border: 5px solid yellow; 
 
    outline: 5px solid blue; 
 
    transition: 0.7s all ease-in; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.double-border:hover { 
 
    background: yellow; 
 
    outline-color: red; 
 
    border-color: blue; 
 
}

<div class="double-border"></div>

Answer 4

由特里有一個PRO和一個CON建議僞元素的使用：

1. PRO - 很好的跨瀏覽器兼容性，因爲舊版IE也支持僞元素。
2. CON - 它需要創建一個額外的（即使是生成的）元素，該元素實際上被定義爲僞元素。

無論如何是一個很好的解決方案。

---

其他解決方案：

如果你能接受的兼容性，因爲IE9（IE8 does not have support for this），就可以實現在其它兩種可能的方式期望的結果：使用outline財產與border結合

1. 和一個單一的插圖box-shadow
2. 使用兩個box-shadow結合border。

Here a jsFiddle與特里的修改後的代碼表示，並排，這些其它可能的解決方案。爲每一個主特定性質有以下（其它在.double-border類共享）：

.left 
{ 
    outline: 4px solid #fff; 
    box-shadow:inset 0 0 0 4px #fff; 
} 

.right 
{ 
    box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff; 
} 

---

LESS代碼：

您要求可能的優點有關使用預處理器等LESS 。我這個具體案例，實用程序不是很好，但無論如何，你可以優化一些東西，用@variable聲明顏色和邊框/邊框/陰影。

這裏我的CSS代碼，在更短的聲明爲例（改變顏色和邊框寬度變得非常快）：

@double-border-size:4px; 
@inset-border-color:#fff; 
@content-color:#ccc; 

.double-border 
{ 
    background-color: @content-color; 
    border: @double-border-size solid @content-color; 
    padding: 2em; 
    width: 16em; 
    height: 16em; 
    float:left; 
    margin-right:20px; 
    text-align:center; 
} 

.left 
{ 
    outline: @double-border-size solid @inset-border-color; 
    box-shadow:inset 0 0 0 @double-border-size @inset-border-color; 
} 

.right 
{ 
    box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color; 
} 

Answer 5

您可以使用大綱與大綱偏移

<div class="double-border"></div> 
.double-border{ 
background-color:#ccc; 
outline: 1px solid #f00; 
outline-offset: 3px; 
} 

Answer 6

你可以使用css3添加無限邊框使用css3 假設你想在一個div上應用多個邊框，那麼代碼如下：

div { 
    border-radius: 4px; 
    /* #1 */ 
    border: 5px solid hsl(0, 0%, 40%); 

    /* #2 */ 
    padding: 5px; 
    background: hsl(0, 0%, 20%); 

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */ 

    /* #4 AND INFINITY!!! (CSS3 only) */ 
    box-shadow: 
     0 0 0 10px red, 
     0 0 0 15px orange, 
     0 0 0 20px yellow, 
     0 0 0 25px green, 
     0 0 0 30px blue; 
} 

Answer 7

也許使用大綱財產

<div class="borders"> 
     Hello 
    </div> 

    .borders{ 
    border: 1px solid grey; 
    outline: 2px solid white; 
    } 

https://jsfiddle.net/Ivan5646/5eunf13f/

Answer 8

您可以使用CSS僞元素沿邊和箱陰影屬性，實現了三重邊界之類的效果。請參見下面的例子爲如何在div的底部創建三個邊框的想法：

.triple-border:after { 
 
    content: " "; 
 
    display: block; 
 
    width: 100%; 
 
    background: #FFE962; 
 
    height: 9px; 
 
    padding-bottom: 8px; 
 
    border-bottom: 9px solid #A3C662; 
 
    box-shadow: -2px 11px 0 -1px #34b6af; 
 
}

<div class="triple-border">Triple border bottom with multiple colours</div>

你必須玩的價值，以獲得正確的對齊。但是，你也可以獲得更多的靈活性，例如如果將某些屬性放在適當的元素中而不是僞選擇器中，則爲4個邊框。