¡Ay!
1. Mueve el ratón a la página web y desaparece = =
*{ cursor: none!important; }2. Simple efecto de desenfoque de texto
*{ color: transparente; Sombra-texto: #111 0 0 5px; }![]()
3. Múltiples fronteras
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0,2), 0 0 0 12px rgba(0, 0, 0, 0,2), 0 0 0 18px rgba(0, 0, 0, 0,2), 0 0 0 24px rgba(0, 0, 0, 0,2); Altura: 200px; margen: 50px automático; ancho: 400px}![]()
4. Editar CSS en tiempo real
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Operaciones simples en CSS
.div{ ancho: cálculo(100% - 500px); }![]()
6、Radio de frontera
Porque básicamente mucha gente lo usa así:
.div { border-radius: 4px; }![]()
Un poco más de gama alta es así:
.div { radio de frontera: 4px 6px 6px 4px; }![]()
Sin embargo, así es como se utiliza la tecnología negra definitiva:
.div { radio de frontera: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Radio de frontera Se pueden asignar 8 valores:
La parte frontal de la barra afecta la dirección horizontal, y la parte trasera de la barra afecta la dirección vertical.
Cada número representa cuatro direcciones diferentes.
7、Desplazamiento de contorno
Al escribir CSS bajo entrada, estarás familiarizado con las siguientes sentencias:
entrada { outline : none; }input:focus { outline : none; Así es como se elimina el wireframe azul predeterminado de la caja de entrada de entrada.
También existe una propiedad de desplazamiento de contorno en CSS donde puedes establecer la distancia del wireframe por defecto:
input { outline-offset: 4px ; }(Grupo de intercambio de aprendizaje front-end web: 328058344 ¡Nada de charlas triviales, no entres a menos que te guste! Ajusta el tamaño del valor del atributo y puedes ver el cambio de distancia del contorno.
Por último, presentaré una demostración del gran blanco antes de los hechos
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=hoja de estilos href="demo2.css"/> </head> <style> cuerpo { antecedentes: #595959; } #baymax{ /* está configurado en center*/ margin: 0 auto; /*altura*/ altura: 600px; /*ocultar desbordamiento*/ desbordamiento: oculto; } #head{ altura: 64px; Ancho: 100px; /*Defina la forma de la esquina redondeada como porcentaje*/radio de borde: 50%; /*antecedentes*/ antecedentes: #fff; marje: 0 auto; Margen Bottom: -20px; /*Establece el estilo del borde inferior*/ borde-inferior: 5px sólido #e0e0e0; /*el atributo establece el orden de apilamiento de los elementos; Los elementos con un orden de pila mayor siempre estarán delante de los elementos con un orden de pila inferior*/ índice z: 100; /*Generar elementos posicionados relativos*/ posición: relativa; } #eye, #eye2{ ancho: 11px; Altura: 13px; Antecedentes: #282828; radio de frontera: 50%; posición: relativa; Arriba: 30px; izquierda: 27px; /*rotar el elemento*/transformar: rotar(8grado); } #eye2{ /*Haz que gire simétricamente*/ transforma: rotar(-8º); izquierda: 69px; Arriba: 17px; } #mouth{ ancho: 38px; altura: 1,5px; Antecedentes: #282828; posición: relativa; izquierda: 34px; Arriba: 10px; } /*Torso y abdomen*/ #torso, #belly{ margin: 0 auto; } Altura: 200px; Ancho: 180px; Antecedentes: #fff; radio de frontera: 47%; /*Establecer borde*/ borde: 5px sólido #e0e0e0; borde superior: ninguno; Z-índice: 1; } #belly{ altura: 300px; Ancho: 245px; márgene-arriba: -140px; Z-índice: 5; } #cover{ ancho: 190px; Antecedentes: #fff; Altura: 150px; marje: 0 auto; posición: relativa; Top: -20px; radio de frontera: 50%; } /*corazón*/ #heart{ ancho:25px; Altura: 25px; radio de frontera: 50%; posición: relativo; /*Añadir efectos de sombra alrededor del borde*/ caja-sombra:2px 5px 2px #ccc inserto; derecha:-115px; top:40px; Z-índice:111; borde:1px sólido #ccc; } /*brazo*/ #left-brazo, #right-brazo{ altura: 270px; ancho: 120px; radio de frontera: 50%; Antecedentes: #fff; marje: 0 auto; posición: relativa; Máximo: -350px; izquierda: -100px; transformar: rotar (20º); índice z: -1; } #right-brazo{ transformar: rotar(-20grado); izquierda: 100px; Arriba: -620px; } /*dedo*/ #l-dedo-grande, #r-dedo-grande{ altura: 50px; ancho: 20px; radio de frontera: 50%; Antecedentes: #fff; posición: relativa; máximo: 250px; izquierda: 50px; transformar: rotar (-50 grados); } #r-dedo-grande{ izquierda: 50px; transformar: rotar (50º); } #l-dedo-meñique, #r-dedo-meñique{ altura: 35px; Ancho: 15px; radio de frontera: 50%; Antecedentes: #fff; posición: relativa; máximo: 195px; izquierda: 66px; transformar: rotar (-40 grados); } #r-dedomeñique{ fondo: #fff; transformar: rotar (40º); máximo: 195px; izquierda: 37px; } /*muslo*/ #left-pierna, #right-pierna{ altura: 170px; ancho: 90px; Radio de frontera: 40% 30% 10px 45%; Antecedentes: #fff; posición: relativa; máximo: -640px; izquierda: -45px; transformar: rotar (-1 grado); índice z: -2; marje: 0 auto; } #right-pierna{ antecedentes: #fff; Radio de frontera: 30% 40% 45% 10px; marje: 0 auto; Arriba: -810px; izquierda: 50px; transformar: rotar (1 grado); </style><body> } <div id="baymax"> <!-- Define la cabeza, incluyendo dos ojos, boca --> <div id="cabeza"> <div id="ojo"></div> <div id="eye2"></div> <div id="boca"></div> </div> <!-- Define el tronco, incluyendo el corazón --> <div id="torso"> <div id="corazón"></div> </div> <!-- Define el abdomen, el abdomen, incluyendo la cubierta (y la unión del torso) --> <div id="vientre"> <div id="cover"></div> </div> <!-- Define el brazo izquierdo, incluyendo dos dedos, uno grande y uno pequeño --> <div id="brazo izquierdo"> <div id="l-dedo grande"></div> <div id="l-dedo-pequeño"></div> </div> <!-- Define el brazo derecho, que también incluye un dedo grande y uno pequeño --> <div id="brazo-derecho"> <div id="r-dedo-grande"></div> <id-div="r-dedo-pequeño"></div> </div> <!-- define pierna izquierda --> <div id="pierna-izquierda"></div> <!-- define pierna derecha --> <div id="pierna derecha"></div> </div></body><html>![]()
|
Publicado en 4/12/2017 20:24:39
|
|
|
|
Publicado en 5/12/2017 9:10:05
|
Publicado en 5/12/2017 9:21:19
