CSS邊框會議點

我希望有人能幫助我的CSS問題...CSS邊框會議點

我使用一個ListView顯示一些效果，但要求是分組的概念，實現這個我使用2組背景顏色交替。我正在嘗試爲這些元素添加邊框，但由於邊框頂部和邊框左邊可能有不同的顏色，是否有任何方法可以將它們碰到的三角形去掉？

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p 
{ 
border-top:10px solid red; 
border-left:10px solid white; 
border-bottom-style:dotted; 
border-left-style:solid; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

來源

2012-06-26 Ketchup

你能不能告訴我們，你的意思是這是什麼一個例子嗎？ – jaypeagi

角落相交，如果左邊框是紅色的，頂部邊框是白色的，我留下一個紅色箭頭，從紅色邊框與白色邊框相交處 – Ketchup

你可以這樣寫：

p{ 
    width:200px; 
    height:200px; 
    background:red; 
    border-left:5px solid pink; 
    -moz-box-shadow:inset 0 5px green; 
    box-shadow:inset 0 5px green; 
}

入住這http://jsfiddle.net/nRWux/1/

箱shaow下面IE8 &無法正常工作。

來源

2012-06-26 11:46:23 sandeep

謝謝，完美的作品:) – Ketchup

這是太棒了，但仍有少量陰影穿過底部的邊界，略顯透明。在大多數情況下不是問題，但如果您需要像素完美，不同的解決方案可能會更好。 – basicallydan

不，不可能刪除他們見面的三角形。邊界是以這種方式實施的，而且沒有辦法。

來源

2012-06-26 11:44:34

可以使用箱陰影的邊框頂部，

在您的例子：http://jsfiddle.net/C7jnJ/

margin-top:10px; 
box-shadow:0 -10px 0 10px red;

取而代之的邊框頂部。該邊距加入，因爲陰影顯示「P」之外，如果你想這裏面，那麼這將是：http://jsfiddle.net/C7jnJ/1/

box-shadow:inset 0px 10px 0px red;

來源

2012-06-26 11:57:27 Alvaro

這也適用，但我使用@sandeeps解決方案 – Ketchup

下面是使用IE8 +兼容的解決方案：pseudo前：

小提琴http://jsfiddle.net/PhilippeVay/hXrW5/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p { 
    position: relative; 
    border-top:10px solid red; 
    border-bottom-style:dotted; 
    border-left-style:none; 
} 
p:before { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    top: -10px; /* top: 0; if you want red over blue (top over left) */ 
    bottom: 0; 
    background: blue; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

來源

2012-06-26 11:59:41 FelipeAls

偉大的解決方案@FelipeAls！謝謝 ;） – Dan

CSS邊框會議點

回答

相關問題