Cómo usar el degradado lineal de CSS3 para crear un borde
Este artículo presenta principalmente cómo usar el degradado lineal CSS3 para hacer bordes. Tiene cierto valor de referencia. Ahora lo comparto con usted. Los amigos que lo necesiten pueden consultarlo.
Lineal-. Las líneas de degradado son bastante poderosas para hacer bordes, especialmente usando sus trazos para crear algunos efectos de borde copiados. Aquí echamos un vistazo a un ejemplo del uso del degradado lineal de CSS3 para hacer bordes.
Generalmente, la línea de trazo de. El borde de la aplicación tiene menos de un píxel, así que dibujé directamente un borde de 1 px como de costumbre. Aunque era de 1 px, el resultado fue completamente diferente y "grueso" del trazo de la aplicación, así que busqué en línea para ver si había. Una solución, pero no pude encontrarla después de buscar por un tiempo. ¿Qué debo hacer? Si la demanda no quiere ser tan dura, entonces tengo que resolverla yo mismo.
Así que el último método me recuerda al gradiente lineal
CSS
.line li{ border: none
background-image; : -webkit-linear-gradient(#222 50%,transparente 50%);
imagen de fondo: -moz-linear-gradient(#222 50%,transparente 50%);
imagen de fondo: -o-linear-gradient(#222 50%,transparente 50%);
imagen de fondo: gradiente lineal(#222 50%,transparente 50%); /p>
tamaño de fondo: 100% 1px;
repetición de fondo: sin repetición;
posición de fondo: fondo inferior;}XML/HTML
- gradiente-lineal
- gradiente-lineal
- gradiente lineal
CSS
imagen de fondo: -webkit-linear-gradient(izquierda, transparente 50 %,# 222 50%);
fondo-tamaño: 1px 100%;
fondo-posición: izquierda Los detalles no se enumeran uno por uno;
Usa lineal para crear efectos de borde complejos
Además, vi un método en Internet para usar el atributo de gradiente lineal para crear un magnífico efecto de borde.
Primero, se proporciona el código. Puede verificar el efecto en su computadora:
CSS
.box {
margen: 80px 30px ancho; : 200px;
altura: 200px;
posición: relativa;
fondo: #fff; p >
}
.box:antes {
contenido: '';
índice z: -1; > posición: absoluta
ancho: 220px;
alto: 220px;
arriba:
izquierda: -10px; ;
}
.first:before {
imagen de fondo: gradiente lineal (90 grados, amarillo, dorado); }
.segundo:antes {
imagen de fondo: gradiente lineal (0 grados, naranja, rojo); tercero: antes de {
imagen de fondo: gradiente-lineal repetido (-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px, #f2f2f2 80px);
}
Como puede ver en el código, en realidad no usamos bordes, entonces, ¿cómo logramos esto? ¿Efecto de borde? ¿Paño de lana? La idea general es que primero definimos una p blanca y luego definimos una p coloreada que es un círculo más grande que el cuadrado blanco. Superponga los dos y deje que la p blanca cubra la p de color para lograr el efecto de un borde.
Aquí se utilizan muchos puntos de conocimiento de CSS.
1. :before pseudoclase
A través del código anterior, podemos ver que en realidad definimos una :before pseudoclase en la p blanca definida, que combina todos los estilos. de los cuadrados de colores. Todos puestos aquí. Esto se debe a que usar la definición :before puede hacer que el posicionamiento sea más conveniente. Simplemente ajuste la parte superior e izquierda al ancho del borde.
Al mismo tiempo, los dos se convierten en un todo.
2. Degradado lineal
Muchos navegadores ahora admiten este método CSS. Este método tiene los siguientes tres modos de uso:
①background:linear-gradient(top,#fff,#000)
El significado de este código es que comenzando desde arriba es blanco , Transición a negro en la parte inferior.
②background:linear-gradient(top,right,#fff,#000)
Este código pasa dos parámetros sobre la posición, arriba y derecha, lo que significa comenzar desde arriba a la derecha. , cambios en la parte inferior izquierda y otros principios son los mismos que el primero.
③background:linear-gradient(30deg,#fff,#000)
El primer parámetro de este código pasa el ángulo. De hecho, el principio y la posición son los mismos, pero. No cambia desde la posición estándar. Entonces, ¿cuál es la relación correspondiente entre ángulo y posición? Según los experimentos, 0 grados corresponden a la parte inferior, 90 grados corresponden a la izquierda, 180 grados corresponden a la parte superior y 360 grados corresponden a la derecha.