CSS3 propiedad border-image
Ejemplos
Designado como un borde alrededor del elemento de imagen div:
{
-webkit-border-image: url (border.png) 30 30 redonda; / * Safari * 5 /
-o-border-image: url (border.png) 30 30 redonda; / * * Opera /
frontera-image: url (border.png) 30 30 redonda;
}
Trate »
En la parte inferior de esta página para más ejemplos.
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
propiedad | |||||
---|---|---|---|---|---|
frontera-imagen | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -o- |
Definiciones de atributos e instrucciones
la propiedad border-image es una propiedad abreviada utilizada para establecer la frontera-imagen-fuente , frontera-imagen-Slice , frontera-imagen-ancho , frontera-imagen-COMIENZO y frontera-imagen-repetición de valor.
Omitido los ajustes a sus valores por defecto.
Consejo: para construir hermosos botones escalables utilizando las propiedades * fronterizas-imagen-!
Por defecto: | Ninguno 100% 1 0 tramo |
---|---|
herencia: | no |
Version: | CSS3 |
la sintaxis de JavaScript: | objetar .style.borderImage = "url (border.png)30 30 redonda" |
gramática
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
más ejemplos
Botón de imagen
Este ejemplo muestra cómo crear un botón atributo border-image.
Artículos relacionados
CSS3 tutorial: CSS3 Fronteras