Sözde öğe (ler) kullanma
Bir sözde öğeyi, öğenin arkasında ve daha büyük olacak şekilde, kendi arka planıyla bir kenarlık efekti oluşturacak şekilde veya daha küçük ve içeride olacak şekilde konumlandırabilirsiniz (ancak içeriğin üstte konumlandırıldığından emin olun).
Birden çok sınıra ihtiyaç duyan öğenin kendi sınırı ve göreceli konumu olmalıdır.
.borders ( position: relative; border: 5px solid #f00; )İkincil sınır, sözde bir öğe ile eklenir. Mutlak konumlandırma ile ayarlanır ve üst / sol / alt / sağ değerlerle girilir. Bunun ayrıca bir sınırı olacaktır ve içeriğin altında tutulur (örneğin, metnin seçilebilirliği ve bağlantıların tıklanabilirliği korunarak), içeriğe negatif bir z-endeksi değeri verilir. Negatif z-endeksine dikkat edin, eğer bu yine kendi arka plan rengine sahip başka bir öğenin içindeyse, bu işe yaramayabilir.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem gbgRqZ'ye bakın.
:afterSözde sınıfı kullanarak üçüncü bir sınır da yapabilirsiniz . Firefox 3'ün (3.6 öncesi) bunu destekleyerek :afterve :beforeancak kesinlikle konumlandırılmasına izin vermeyerek (yani tuhaf görünmesini sağlayarak ) mahvettiğine özellikle dikkat edin .
Anahat kullanma
Kenarlıktan biraz daha sınırlı olsa da (ne olursa olsun tüm öğenin etrafında döner) anahat, ekstra özgür bir sınırdır.
.borders ( border: 5px solid blue; outline: 5px solid red; )Kutu gölgesini kullanma
Gölge ofsetini yaparak ve 0 bulanıklaştırarak bir kenarlık efekti oluşturmak için kutu gölgesini kullanabilirsiniz. Ayrıca, değerleri virgülle ayırarak istediğiniz kadar "kenarlığa" sahip olabilirsiniz:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )CodePen'de Chris Coyier'den (@chriscoyier) Pen xbgreX'e bakın.
Kırpılmış bir arka plan kullanma
Bir öğenin arka planını dolgudan önce durdurabilirsiniz. Bu şekilde, normal bir sınır elemanı bir bakıma çift kenarlık gibi görünebilir.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Bir girişte:
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Pen Double border efektine bakın.