Frontera CSS (fronteras)
propiedades de borde CSS
propiedades de borde CSS permiten especificar el estilo borde de un elemento y el color.
Estilo de borde
Propiedad estilo de borde especifica qué tipo de borde que desea visualizar.
la propiedadborder-style se utiliza para definir el estilo de la frontera
valor de border-style:
Ninguno: Sin borde predeterminado
salpicado: punteado: Define una marquesina
discontinua: Define un cuadro de líneas discontinuas
sólido: la definición de borde continuo
doble: definir dos límites. Los mismos valores de la anchura de dos fronteras y border-width de
ranura: ranura definida borde 3D. El efecto depende de los valores de color de la frontera
canto: la definición de los bordes canto 3D. El efecto depende de los valores de color de la frontera
Recuadro: Define un borde 3D incorporado. El efecto depende de los valores de color de la frontera
principio: Define un borde de inicio 3D. El efecto depende de los valores de color de la frontera
Probar: establecer el estilo de borde
Ancho del borde
Se puede especificar el ancho del borde por el atributo border-width.
Especifica el ancho de la frontera de dos maneras: Se puede especificar la longitud del valor, tales como 2px o 0.1em; o utilizar una de las tres palabras clave, que son delgadas, medio (por defecto) y grueso.
Nota: CSS no define tres palabras clave ancho específico, por lo que un agente de usuario puede ser el fino, medio y grueso ajustado respectivamente iguales a 5px, 3px y 2px, mientras que otro agente de usuario, respectivamente, ajustado a 3px, 2px y 1px.
Ejemplos
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Trate »
color del borde
la propiedad border-color establece el color de la frontera. Puede ajustar el color:
- Nombre - Especifica el nombre del color, como "rojo"
- RGB - especificar un valor RGB, tales como "rgb (255,0,0)"
- Hex - Especifica el valor hexadecimal, como por ejemplo "# ff0000"
También puede establecer el color del borde de "transparente".
Nota: border-color por sí solo no trabajar, que debe tener para usar el estilo de borde para establecer el estilo de borde.
Ejemplos
{
Border-style: sólido;
border-color: rojo;
}
p.two
{
Border-style: sólido;
border-color: # 98bf21;
}
Trate »
Frontera - ajustes separados para cada lado
En CSS, puede especificar diferentes lados diferentes fronteras:
Ejemplos
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Trate »
El ejemplo anterior también puede establecer un único atributo:
establecimiento de estilo frontera puede tener de uno a cuatro valores:
- Border-style: punteado doble sólida discontinua ;
- Las fronteras están salpicadas
- borde derecho es sólida
- Un borde doble fondo
- borde izquierdo es discontinua
- frontera de estilo: dobles de trazo discontinuo sólido;
- Las fronteras están salpicadas
- La izquierda y la orilla derecha es sólida
- Un borde doble fondo
- frontera de estilo: punteado sólido;
- En la parte inferior es borde de puntos
- fronteras derecha e izquierda son sólidos
- frontera de estilo: punteado;
- Rodeada por un borde de puntos
El ejemplo anterior utiliza el estilo de borde. Sin embargo, también puede ser border-width, border-color juntos.
Frontera - propiedad abreviada
El ejemplo anterior utiliza una gran cantidad de propiedad para establecer la frontera.
T También puede establecer la frontera en una propiedad.
Puede atributo "frontera" set:
- border-width
- Border-style (requerido)
- border-color
más ejemplos
Todas las propiedades de borde de ser una declaración
Este ejemplo demuestra una propiedad abreviada para establecer las cuatro propiedades de borde en el mismo comunicado.
Configuración de estilo de borde
Este ejemplo muestra cómo establecer el estilo del borde inferior.
Ajuste de la anchura del borde izquierdo
Este ejemplo muestra cómo establecer el ancho del borde izquierdo.
Ajuste el color de los cuatro bordes
Este ejemplo muestra cómo establecer el color de los cuatro bordes. Puede configurar uno a cuatro colores.
Establecer el color del borde derecho
Este ejemplo muestra cómo establecer el color del borde derecho.
propiedades de borde CSS
propiedad | descripción |
---|---|
frontera | Abreviación de las propiedades se utiliza para establecer la propiedad de los cuatro lados en un comunicado. |
Border-style | Se utiliza para establecer el estilo de borde de todos los elementos, o por separado establecer el estilo de borde para cada lado. |
border-width | Todo frontera propiedad abreviada establece el ancho para el elemento, o ajustar individualmente el ancho a cada lado de la frontera. |
border-color | Abreviación de las propiedades, el elemento de toda la porción de borde visible colores, o establecer el color, respectivamente cuatro lados. |
border-bottom | Abreviación de las propiedades utiliza para establecer todos los atributos de la frontera con un comunicado. |
border-bottom-color de | Ajuste el color del borde inferior del elemento. |
-Inferior-estilo de borde | Configuración de los elementos de estilo frontera. |
border-bottom-ancho | Ajuste el ancho del borde inferior del elemento. |
border-left | Abreviación de las propiedades permite configurar todas las propiedades del borde izquierdo en un comunicado. |
border-left-color de | Establecer el color del elemento de borde izquierdo. |
border-left-estilo | El elemento del estilo del borde izquierdo. |
border-left-ancho | El elemento de la anchura del borde izquierdo. |
border-right | propiedad abreviada para establecer todas las propiedades a la derecha de la caja con un comunicado. |
border-right-color de | Establecer el color del elemento de borde derecho. |
border-right-estilo | El elemento de los estilos de borde recto. |
border-right-ancho | Establecer la anchura del elemento de borde derecho. |
border-top | propiedad abreviada para establecer todas las propiedades en la frontera de un comunicado. |
border-top-color de | Elemento se encuentra en el color de la frontera. |
-Estilo de borde superior | Elemento se encuentra en el estilo de borde. |
border-top-ancho | Elemento se encuentra en la anchura de la frontera. |