Đường viền kép CSS (2 màu) mà không sử dụng đường viền?

Question

Tôi đã tự hỏi những gì các bạn nghĩ là cách dễ nhất để có được một đường viền đôi với 2 màu xung quanh một div? Tôi đã cố gắng sử dụng biên giới và phác thảo với nhau và nó làm việc trong Firefox, nhưng phác thảo dường như không hoạt động trong IE và đó là một vấn đề. Có cách nào tốt để giải quyết vấn đề này không?

Đây là những gì tôi có nhưng phác thảo không hoạt động với IE: outline: 2px solid # 36F; đường viền: 2px rắn # 390;

Cảm ơn.

Answer 1

Bạn có thể thêm nhiều đường viền bằng các phần tử giả và đặt chúng xung quanh đường viền ban đầu của bạn. Không có đánh dấu thêm. Tương thích giữa các trình duyệt, điều này đã xảy ra kể từ CSS 2.1. Tôi đã ném một bản demo lên trên jsfiddle cho bạn .... lưu ý, khoảng cách giữa các màu đường viền là có cho ví dụ. Bạn có thể đóng nó bằng cách thay đổi số lượng pixel trong vị trí tuyệt đối.

.border 
{ 
    border:2px solid #36F; 
    position:relative; 
    z-index:10 
} 

.border:before 
{ 
    content:""; 
    display:block; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    border:2px solid #36F 
} 

http://jsfiddle.net/fvHJq/1/

Answer 2

Một giải pháp rất đơn giản mà bạn có thể sử dụng dưới dạng hình thức thu gọn nếu không có cách nào khác để sử dụng hai div. Div chính của bạn, và sau đó một cái trống rỗng chỉ gói nó mà bạn có thể sử dụng để thiết lập đường viền thứ hai.

Answer 3

Sử dụng hộp bóng fo biên giới lần thứ 2.

div.double-border { 
    border: 1px solid #fff; 
    -webkit-box-shadow: 0px 0px 0px 1px #000; 
    -moz-box-shadow: 0px 0px 0px 1px #000; 
    box-shadow: 0px 0px 0px 1px #000; 
} 

Trong trường hợp này hộp bóng không bỏ qua bất động sản border-radius như phác thảo không

Answer 4

muộn để bên cho câu hỏi này, nhưng tôi cảm thấy như tôi nên ghi lại một nơi nào đó. Bạn có thể thực hiện một chức năng mở rộng trong một cái gì đó giống như Ít hoặc Stylus mà sẽ tạo ra bất kỳ số lượng biên giới (Stylus đây):

abs(n) 
    if n < 0 
     (-1*n) 
    else 
     n 

horizBorder(n, backgroundColor) 
    $shadow = 0 0 0 0 transparent 
    $sign = (n/abs(n)) 
    for $i in ($sign..n) 
     /* offset-x | offset-y | blur-radius | spread-radius | color */ 
     $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor 
    return $shadow 

Sau đó,

$background: #FFF // my background was white in this case and I wanted alternating black/white borders 

.border-bottom 
    box-shadow: horizBorder(5, $background) 
.border-top 
    box-shadow: horizBorder(-5, $background) 
.border-top-and-bottom 
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background) 

Answer 5

Với hộp bóng mà bạn có thể đạt được như nhiều khác nhau viền màu như bạn muốn. Ví dụ:

#mydiv{ 
    height: 60px; 
    width: 60px; 
    box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff; 
} 

<div id="mydiv">&nbsp;</div> 

https://jsfiddle.net/aruanoc/g5e5pzny

Answer 6

Một mẹo nhỏ;)

box-shadow: 
0 0 0 2px #000, 
0 0 0 3px #000, 
0 0 0 9px #fff, 
0 0 0 10px #fff, 
0 0 0 16px #000, 
0 0 0 18px #000; 

Answer 7

.border{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #f06d06; 
 
    position: relative; 
 
    border: 5px solid blue; 
 
    margin: 20px; 
 
} 
 
.border:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -15px; 
 
    left: -15px; 
 
    right: -15px; 
 
    bottom: -15px; 
 
    background: green; 
 
    z-index: -1; 
 
}

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

sử dụng tên lớp cho .border trao thung lũng border:2px solid #000 cho border.then đơn bạn wan t một đường viền khác cố gắng .border:after cho các giá trị nếu bạn có kiểm tra biên giới thứ hai trên mẫu mã ví dụ