Imagini CSS3 de frontieră
Cu CSS3 de border-image proprietate, puteți seta o imagine pentru a fi utilizat ca frontiera în jurul unui element.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| 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 Proprietatea
CSS3 de border-image proprietate vă permite să specificați o imagine pentru a fi utilizată în locul frontierei normale în jurul unui element.
Proprietatea are trei părți:
- Imaginea de a utiliza ca frontiera
- În cazul în care să felie imaginea
- Definiți dacă secțiunile de mijloc trebuie să fie repetată sau întinsă
Vom folosi următoarea imagine (called "/css/border.png") :
De border-image proprietate ia imaginea si felii in noua sectiuni, cum ar fi o placă de tic-tac-toe. Apoi plasează colțurile la colțuri, iar secțiunile de mijloc sunt repetate sau întinsă, după cum specificați.
Notă: Pentru border-image pentru a lucra, elementul are nevoie , de asemenea, de border set de proprietate!
Aici, secțiunile de mijloc ale imaginii sunt repetate pentru a crea frontiera:
O imagine ca un chenar!
Aici este codul:
Exemplu
#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;
}
Încearcă - l singur » Aici, secțiunile de mijloc ale imaginii sunt întinse pentru a crea frontiera:
O imagine ca un chenar!
Aici este codul:
Exemplu
#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;
}
Încearcă - l singur » Tip: de border-image proprietate este de fapt o proprietate prescurtare pentru border-image-source , border-image-slice , border-image-width , border-image-outset și border-image-repeat proprietăți.
CSS3 border-image - Valori diferite Slice
Valori diferite felie schimba complet aspectul de frontiera:
Exemplul 1:
border-image: url(border.png) - border-image: url(border.png) 50 rotund;
Exemplul 2:
border-image: url(border.png) 20% rotund;
Exemplul 3:
border-image: url(border.png) 30% rotund;
Aici este codul:
Exemplu
#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;
} Încearcă - l singur » Testați-te cu exerciții!
CSS3 Proprietăți de frontieră
| Proprietate | Descriere |
|---|---|
| border-image | O proprietate prescurtare pentru stabilirea tuturor border-image-* proprietățile |
| border-image-source | Specifică calea către imaginea care urmează să fie folosit ca un chenar |
| border-image-slice | Specifică modul în care să taie imaginea de frontieră |
| border-image-width | Specifică lățimile imaginii de frontieră |
| border-image-outset | Specifică suma cu care zona de frontieră a imaginii se extinde dincolo de caseta de frontieră |
| border-image-repeat | Specifică dacă imaginea de frontieră ar trebui să fie repetate, rotunjite sau întins |