Obrazy CSS3 graniczne
Z CSS3 border-image nieruchomości, można ustawić zdjęcie, aby być stosowane jako obramowania wokół elementu.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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 nieruchomości
CSS3 border-image właściwość pozwala określić obraz, który ma być używany zamiast normalnego ramką elementu.
Nieruchomość składa się z trzech części:
- Obraz do wykorzystania jako granicy
- Gdzie pokroić obraz
- Określ, czy odcinki środkowe powinny być powtórzone lub rozciągnięty
Użyjemy następujący obraz (o nazwie "/css/border.png"):
border-image Obiekt zajmuje obraz i plastry go na dziewięć odcinków, jak płyty Kółko i krzyżyk. Następnie umieszcza narożniki na rogach, a odcinki środkowe są powtarzane lub rozciągnięty tak określić.
Uwaga: W przypadku border-image do pracy, element musi również border zestaw właściwości!
Tutaj środkowe odcinki obrazu są powtarzane, aby stworzyć granicę:
Obraz jako granicy!
Oto kod:
Przykład
#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;
}
Spróbuj sam " Tutaj środkowe odcinki obrazu są rozciągnięte do utworzenia granicy:
Obraz jako granicy!
Oto kod:
Przykład
#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;
}
Spróbuj sam "  | Wskazówka: border-image nieruchomość jest rzeczywiście skróconą własnością dla border-image-source , border-image-slice , border-image-width , border-image-outset i border-image-repeat właściwości. |
|---|
CSS3 border-image - Różne wartości Plaster
Różne wartości slice całkowicie zmienia wygląd obramowania:
Przykład 1:
border-image: url(border.png) 50 okrągłe;
Przykład 2:
border-image: url(border.png) 20% okrągła;
Przykład 3:
border-image: url(border.png) 30% okrągła;
Oto kod:
Przykład
#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;
} Spróbuj sam " Sprawdź się z ćwiczeń!
Właściwości CSS3 graniczne
| Nieruchomość | Opis |
|---|---|
| border-image | Skrót nieruchomości na ustawienie wszystkich border-image-* właściwości |
| border-image-source | Określa ścieżkę do obrazu, które mają być używane jako obramowanie |
| border-image-slice | Określa sposób na dzielenie obrazu granic |
| border-image-width | Określa szerokość obrazu granicznego |
| border-image-outset | Określa ilość, o jaką strefa przygraniczna obraz rozciąga się poza pole granicznego |
| border-image-repeat | Określa, czy obraz granicy powinien być powtarzany, zaokrąglone lub rozciągnięty |