Dış kenarlık dış kenarlıktan daha kalın olan CSS Çift Bordür

Question

Güncel çalışmamda bir kapsayıcıda çift kenarlık oluşturmam gerekiyor. Sınır stili: çift; Bunu başarmakla birlikte, müşterim dış sınırın kalınlığının & olmasını ve iç kenarlığın normal kalınlıkta olmasını ister.

2 div oluşturmaktan başka, daha büyük bir kalınlığa sahip dış div ile iç içe geçmiş, veya kenarlık resimlerinin kullanımıyla, sadece 1 div ile CSS ile yapabileceğim herhangi bir yol var mı? kenarlık stilini belirleme: çift; ve hala dış sınırı daha kalın hale getirebilir.

Answer 1

Anahatlar, CSS3 belirtimine dahil edilir ve hem bir kenarlığa hem de anahatta tek bir öğeye uygulanmasına izin verir.

Anahat özelliği, sınır komutuyla aynıdır. Bununla birlikte, ek ofset özelliği, sınırın elemanın içinde veya dışında daha fazla hareket etmesine izin verir.

2 farklı renkte kenarlık vermek için ana hatları kullandım, kenarlıklarınızı 2 farklı boyutta vermek için kodu değiştirin.

#box { 
border: 1px double #000; 
outline: 2px solid #699; 
outline-offset: -9px; 
}

Answer 2

Hayır, bu mümkün değil. CSS kenarlığı genişliği, kenarlık stilinden bağımsız olarak kenarlığın toplam kalınlığını belirtir. Başka bir DIV'ye sarmaktan daha iyi bir yol göremiyorum.

Düzenleme: Sen outline kullanarak bunu kesmek, ama bir subtle difference between outline and border var olabilir.

Answer 3

Yoksa CSS3 o süslü yeni malzeme ile bir sınır görüntü kullanabilirsiniz

border: double 4px black; 
outline: solid 3px black; 

olsa gitmeyeceklerini, (bunu da arayabilirsiniz bu, bir 1px iç ve 4 piksel dış "sınır" üretecek) Şu anda kullanılan tarayıcıların çoğunda desteklenmez.

Answer 4

da kullanabilirsiniz: Örneğin, sadece altta farklı kalınlıkta bir çift kenarlık sahip olabileceği Yani

https://stackoverflow.com/a/11179169/1468708

: Böyle before sözde elemanı.