CSS Sınır Toplantısı noktası

birisi bir css sorunu olan bana yardımcı olabilir umuyorum

... Ben bazı sonuçlarını görüntülemek için bir liste görünümü kullanıyorumCSS Sınır Toplantısı noktası

, öyleyim bunu başarmak için, gruplama bir kavram olacaksa gereklidir Gruplar arasında değişen 2 arka plan rengi kullanarak. Bu öğelere bir kenarlık eklemeye çalışıyorum, ancak kenarlık ve kenarlık sol farklı renkler olabileceğinden, karşılaştıkları üçgeni kaldırmanın herhangi bir yolu var mı?

<!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>

kaynak

2012-06-26 Ketchup

bize bu demek dair bir örnek gösterir misiniz keman? – jaypeagi

köşeleri bir açıyla buluşur, sol kenarlık kırmızıysa ve üst kenarlık beyazsa, kırmızı kenarlığın beyaz kenarlıkla buluştuğu yerden kırmızı bir okla çıktım – Ketchup

Böyle yazabilirsiniz:

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; 
}

Kontrol bu http://jsfiddle.net/nRWux/1/

kutu shaow aşağıda IE8 & çalışmaz.

kaynak

2012-06-26 11:46:23 sandeep

Teşekkür ederim, mükemmel çalışıyor :) – Ketchup

Harika, ama yine de, hafifçe şeffaf olan, en altta sınırın içine az miktarda gölge geçiyor. Çoğu durumda sorun değil, ancak piksel mükemmel olmak gerekirse farklı bir çözüm muhtemelen daha iyi olurdu. – basicallydan

Hayır, buluştuğu yerde üçgeni çıkarmak mümkün değildir. Sınırlar bu şekilde uygulanır ve etrafta bir yol yoktur.

kaynak

2012-06-26 11:44:34

Sen örnekte, sınır-top

kutu-gölge kullanabilirsiniz: http://jsfiddle.net/C7jnJ/

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

yerine sınır-top. Gölge 'p' dışında görüntülüyor çünkü içine isterseniz margin-top, ilave edilir, o zaman olurdu: pseudo önce: http://jsfiddle.net/C7jnJ/1/

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

kaynak

2012-06-26 11:57:27 Alvaro

Bu ayrıca çalışır, ancak @sandeeps çözümünü kullandım – Ketchup

İşte IE8 kullanarak + uyumlu bir çözüm

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>

kaynak

2012-06-26 11:59:41 FelipeAls

Mükemmel çözüm @FelipeAls! Teşekkürler ;) – Dan

CSS Sınır Toplantısı noktası

cevap

İlgili konular