自定義CSS邊框樣式（這是一個棘手的！）

Question

我有一個棘手的CSS邊框，我想樣式。實質上，我想爲一個div實現這種邊框效果，其中div高度爲10px，帶有1px實心綠色邊框，但右邊框具有4px純色紅色，這是垂直居中且僅高5px的覆蓋層。

見下文：

什麼好主意？我玩過Pseudo元素，但沒有運氣。我想要一個div。

謝謝

Answer 1

創建一個超過綠色div的div。 定位它就像你想要的。 給它這個CSS：pointer-events:none;

我懷疑這是可能的在一個單獨的股利。也許有一個圖像作爲正確的邊界，但這意味着在div大小的靈活性損失。

Answer 2

那麼你可以使用後或僞此

div:after{ 
content: ''; 
position: absolute; 
border:5px solid green; 
height: 50px; 
left:198px; 
top:60px;} 

小提琴前： http://jsfiddle.net/zjUZB/1/

Answer 3

也許使用

.your-div:after { content: " "; 
border-left: 10px /*or whatever*/ solid red; 
position: relative;} 

並設置邊框，寬度，高度，位置等。你需要他們。

只是一個快速的想法，尚未測試:)

除此之外，我不知道（CSS不支持多個邊界）。

哦，我剛剛讀到你已經玩過僞元素了......所以你可能已經嘗試過了。

Answer 4

你可以用CSS3做到這一點。

div { 
    width:10px; 
    height:10px; 
    border:1px solid green; 
    position:relative; 
} 

div:after { 
    content: ''; 
    background: red; 
    width: 3px; 
    height: 6px; 
    position: absolute; 
    right: -2px; 
    top: 2px; 
} 

你一定要玩的像素值的，以使它像你想擁有它（你的榜樣形象並不真的像它是10px的X 10px的）。

希望它有幫助。