CSS3 Sınır Görüntüleri
CSS3 ile border-image özelliği, bir elemanın etrafında sınırı olarak kullanılacak bir görüntüyü ayarlayabilirsiniz.
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Mülkiyet
CSS3 border-image özelliği bir resim yerine eleman etrafındaki normal sınırın kullanılacak belirlemenizi sağlar.
mülkiyet üç bölümden oluşur:
- görüntü sınırı olarak kullanmak
- Nerede görüntüyü dilimlemek
- orta bölümleri tekrarlanan veya gergin gerekip gerekmediğini tanımlayın
Aşağıdaki resim kullanacağız (called "/css/border.png") :
border-image özelliği görüntü alır ve bir tic-tac-toe panosunun gibi, dokuz bölüme bunu dilimler. Daha sonra köşelerde köşe yerleştirir ve orta bölümler tekrar veya belirttiğiniz olarak gerilir.
Not: For border-image çalışmak, eleman da ihtiyacı border mülkiyet seti!
Burada, görüntünün orta bölümleri sınırını oluşturmak için tekrarlanır:
bir sınır olarak bir görüntü!
İşte kod:
Örnek
#borderimg
{
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 " Burada, görüntünün orta bölümleri sınırını oluşturmak için gergin:
bir sınır olarak bir görüntü!
İşte kod:
Örnek
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Kendin dene " Tip: border-image özelliği aslında bir stenografi özelliği olan border-image-source , border-image-slice , border-image-width , border-image-outset ve border-image-repeat özellikleri.
CSS3 border-image - Farklı Dilim Değerler
Farklı dilim değerleri tamamen sınırın görünümünü değiştirir:
Örnek 1:
border-image: url(border.png) 50 yuvarlak;
Örnek 2:
border-image: url(border.png) yuvarlak% 20;
Örnek 3:
border-image: url(border.png) yuvarlak% 30;
İşte kod:
Örnek
#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 " Egzersizleri ile Yourself test edin!
CSS3 Sınır Özellikleri
| özellik | Açıklama |
|---|---|
| border-image | Tüm ayarlanması için bir stenografi özelliği border-image-* özelliklerini |
| border-image-source | resmin yolunu bir sınır olarak kullanılacak belirtir |
| border-image-slice | nasıl sınır görüntüyü dilim belirtir |
| border-image-width | Sınır görüntüsünün genişlikleri belirtir |
| border-image-outset | Sınır görüntü alanı sınır kutusunun arkasına kadar uzanan tarafından miktarını belirtir |
| border-image-repeat | Sınır görüntü, tekrarlanan yuvarlak veya gergin olması gerekip gerekmediğini belirtir |