color - font style css

Establecer color de borde CSS a color de texto

Question

¿Hay alguna manera de establecer el border-color del border-color en CSS para que sea el mismo que el color del texto?

Por ejemplo, tener una clase que agrega un borde punteado inferior, pero dejando el color de dicho borde para que coincida con el color del texto de la misma manera que el color de text-decoration:underline del text-decoration:underline es el color del texto (propiedad de color ) ?

Answer 1

Esta:

border-bottom: 1px dotted currentColor;

De la especificación:

currentColor El valor de la propiedad ''color''. El valor calculado de la palabra clave ''currentColor'' es el valor calculado de la propiedad ''color''. Si la palabra clave ''currentColor'' se establece en la propiedad ''color'' en sí misma, se trata como ''color: inherit''.

Consulte aquí: http://www.w3.org/TR/css3-color/#currentcolor

(aunque no funciona en IE8)

Actualización: Entonces, parece que no es necesario establecer explícitamente el valor del color, ya que el valor predeterminado ya es el valor de la propiedad del color .

Entonces, esto funciona bien

border-bottom: 1px solid;

Answer 2

Realmente obtienes este comportamiento gratis; se menciona en la spec :

Si el color del borde de un elemento no se especifica con una propiedad de borde, los agentes de usuario deben usar el valor de la propiedad "color" del elemento como el valor calculado para el color del borde.

Así que todo lo que tiene que hacer es omitir el color al usar la propiedad de la abreviatura del border :

.dotted-underline {
border-bottom: dotted 1px;
}

O solo use las propiedades de border-style border-width , y no border-color :

.dotted-underline {
border-bottom-style: dotted;
border-bottom-width: 1px;
}

O, en los navegadores que admiten la nueva palabra clave CSS3 currentColor , especifíquelo como valor para border-color de border-color (útil para anular las declaraciones de border-color existentes):

.dotted-underline {
border-bottom-color: currentColor;
border-bottom-style: dotted;
border-bottom-width: 1px;
}

El color que toma el borde será el mismo que el color del texto por defecto .

Answer 3

Tendrás que configurar estos para que sean del mismo color.

Si quieres que tu CSS sea más programático y SECO, debes usar algo como MENOS . Puede ahorrarle mucho trabajo, por lo que solo tiene que declarar ese color una vez.