CSS3 border-image Property

Örnek

Bir elemanın etrafına sınır olarak bir görüntü belirtin:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

border-image özelliği bir resim yerine eleman etrafındaki normal sınırın kullanılacak belirlemenizi sağlar.

Border-image özelliği ayarlamak için bir kestirme niteliktir border-image-source , sınır-görüntü-dilim , sınır-görüntü genişliği , sınır-görüntü-outset ve sınır-görüntü-tekrar özelliklerini.

Atlanmış değerler varsayılan değerlerine ayarlanır.

Varsayılan değer:	none 100% 1 0 stretch
Miras:	no
canlandırılabilir:	no. Read about animatable
Versiyon:	CSS3
JavaScript sözdizimi:	object .style.borderImage=" url(border.png) 30 round" Try it

Tarayıcı Desteği

Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.

Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.

özellik
border-image	16.0 4,0 -webkit-	11.0	15.0 3.5 -moz-	6 3.1 -webkit-	15.0 11.0 -o-

Not: Aşağıdaki her değer için ayrı bir tarayıcı desteği Bkz.

CSS sözdizimi

border-image: Mülkiyet Değerler

değer	Açıklama	Oynat
border-image-source	resmin yolunu bir sınır olarak kullanılacak
border-image-slice	Sınır görüntüsünü nasıl dilimleme	Oynat "
border-image-width	Sınır görüntü genişliği
border-image-outset	Sınır görüntü alanı sınır kutusunun arkasına kadar uzanan tarafından tutar
border-image-repeat	Sınır görüntü tekrarlanmalıdır olsun, yuvarlak veya gerilmiş	Oynat "
initial	varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun
inherit	üst öğesinden bu özelliği devralır. Yaklaşık miras oku

Diğer Örnekler

Örnek

Farklı dilim değerleri tamamen sınırın görünümünü değiştirir:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Kendin dene "