CSS Kenarlık Resimleri
CSS Kenarlık Resimleri
CSS border-image
özelliğiyle, bir öğenin çevresinde kenarlık olarak kullanılacak bir görüntü ayarlayabilirsiniz.
CSS border-image Özellik
CSS border-image
özelliği, bir öğenin etrafındaki normal kenarlık yerine kullanılacak bir görüntü belirlemenize olanak tanır.
Mülkiyet üç bölümden oluşur:
- Kenarlık olarak kullanılacak resim
- Resmin nerede dilimleneceği
- Orta bölümlerin tekrarlanması mı yoksa uzatılması mı gerektiğini tanımlayın
Aşağıdaki resmi kullanacağız ("border.png" olarak adlandırılır):
Özellik border-image
, görüntüyü alır ve tic-tac-toe tahtası gibi dokuz bölüme ayırır. Daha sonra köşeleri köşelere yerleştirir ve orta kısımlar sizin belirlediğiniz şekilde tekrarlanır veya uzatılır.
Not: Çalışması border-image
için öğenin ayrıca
border
özellik kümesine ihtiyacı vardır!
Burada, kenarlığı oluşturmak için görüntünün orta bölümleri tekrarlanır:
Sınır olarak bir görüntü!
İşte kod:
Örnek
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Burada, kenarlığı oluşturmak için görüntünün orta bölümleri gerilir:
Sınır olarak bir görüntü!
İşte kod:
Örnek
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
İpucu: Özellik border-image
aslında
border-image-source
, border-image-slice
, border-image-width
ve
özellikleri border-image-outset
için bir kestirme özelliktir border-image-repeat
.
CSS border-image - Farklı Dilim Değerleri
Farklı dilim değerleri, kenarlığın görünümünü tamamen değiştirir:
Örnek 1:
border-image: url(border.png) 50 round;
Örnek 2:
border-image: url(border.png) %20 yuvarlak;
Örnek 3:
border-image: url(border.png) %30 yuvarlak;
İşte kod:
Örnek
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30% round;
}
CSS Kenarlık Görüntüsü Özellikleri
Property | Description |
---|---|
border-image | A shorthand property for setting all the border-image-* properties |
border-image-source | Specifies the path to the image to be used as a border |
border-image-slice | Specifies how to slice the border image |
border-image-width | Specifies the widths of the border image |
border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |