Les débutants jouent un peu de technologie noire en CSS

fanxiaolin84 · Publié sur 04/12/2017 20:24:39

Aïe
1. Déplacez la souris dans la page web et elle disparaît = =
*{ curseur : none !important ; }2. Effet simple de flou de texte
*{ color : transparent ; text-shadow : #111 0 0 5px ; }
3. Frontières multiples
.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) ; Taille : 200px ; Marge : 50px auto ; largeur : 400px}
4. Éditer le CSS en temps réel
< !DOCTYPE html><html> <body> <style style="display :block » contentEditable> body { color : blue } </style> </body></html>
5. Opérations simples en CSS
.div{ width : calc(100 % - 500px) ; }
6、Rayon frontière
Parce qu’en gros, beaucoup de gens l’utilisent ainsi :
.div { border-radius : 4px ; }
Un peu plus haut de gamme, c’est comme ça :
.div { rayon de frontière : 4px 6px 6px 4px ; }
Cependant, voici ainsi que la technologie noire ultime est utilisée :
.div { rayon-frontière : 5px 5px 3px 2px / 5px 5px 1px 3px ; }

Rayon de frontière Il peut se voir attribuer 8 valeurs :
L’avant de la barre influence la direction horizontale, et l’arrière de la barre influence la direction verticale.
Chaque chiffre représente quatre directions différentes.

7、Décalage de contour
Lorsque vous écrivez du CSS sous entrée, vous serez familier avec les instructions suivantes :
entrée { outline : none ; }Input :Focus { Outline : None ; C’est ainsi qu’on retire le fil de fil bleu par défaut de la boîte d’entrée d’entrée.
Il existe aussi une propriété de décalage contour dans CSS où vous pouvez définir la distance du fil par défaut :
input { outline-offset : 4px ; }(Groupe d’échange d’apprentissage front-end web : 328058344 Pas de bavardages, ne participez pas à moins que ça vous plaise ! Ajustez la taille de la valeur de l’attribut et vous pouvez voir la variation de distance du contour.
Enfin, je vais présenter une démonstration du grand blanc avant les faits
< !doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=feuille de style href="demo2.css"/> </head> <style> corps { Contexte : #595959 ; } #baymax{ /* est réglé au centre*/ marge : 0 auto ; /*hauteur*/ taille : 600px ; /*cacher le débordement*/ déborder : caché ; } #head{ taille : 64px ; largeur : 100px ; /*Définissez la forme du coin arrondi en pourcentage*/rayon de bordure : 50 % ; /*contexte*/ contexte : #fff ; marge : 0 auto ; marge-bas : -20px ; /*Définir le style de la bordure inférieure*/ bordure-bas : 5px #e0e0e0 solide ; /*attribute définit l’ordre d’empilement des éléments ; Les éléments d’ordre de pile supérieur seront toujours devant ceux d’ordre de pile inférieur*/ indice z : 100 ; /*Générer des éléments positionnés relatifs*/ position : relative ; } #eye, #eye2{ largeur : 11px ; taille : 13 px ; Contexte : #282828 ; rayon de frontière : 50 % ; Position : relative ; top : 30px ; à gauche : 27px ; /*faire tourner l’élément*/transformer : tourner (8de) ; } #eye2{ /*Faire tourner symétriquement*/ transformer : tourner(-8deg) ; gauche : 69px ; haut : 17px ; } #mouth{ largeur : 38px ; Taille : 1,5px ; Contexte : #282828 ; Position : relative ; gauche : 34px ; top : 10px ; } /*Torse et abdomen*/ #torso, #belly{ marge : 0 auto ; } Taille : 200px ; largeur : 180px ; Contexte : #fff ; rayon de frontière : 47 % ; /*Définir bordure*/ bordure : 5px #e0e0e0 solide ; bordure : aucun ; Z-index : 1 ; } #belly{ hauteur : 300px ; largeur : 245px ; Marge-haut : -140px ; Z-index : 5 ; } #cover{ largeur : 190px ; Contexte : #fff ; Taille : 150px ; marge : 0 auto ; Position : relative ; top : -20px ; rayon de frontière : 50 % ; } /*cœur*/ #heart{ width :25px ; Taille : 25 px ; rayon de frontière : 50 % ; Position : Relatif ; /*Ajouter des effets d’ombre autour de la bordure*/ box-shadow :2px 5px 2px #ccc insertion ; droite : -115px ; top : 40px ; Z-index : 111 ; bordure : 1px solide #ccc ; } /*bras*/ #left-bras, #right-bras{ hauteur : 270px ; largeur : 120px ; rayon de frontière : 50 % ; Contexte : #fff ; marge : 0 auto ; Position : relative ; top : -350px ; à gauche : -100px ; transformer : tourner (20de) ; Indice z : -1 ; } #right-bras{ transformer : tourner(-20°) ; gauche : 100px ; haut : -620px ; } /*doigt*/ #l-gros doigt, #r-gros doigt{ hauteur : 50px ; largeur : 20px ; rayon de frontière : 50 % ; Contexte : #fff ; Position : relative ; haut : 250px ; gauche : 50px ; transformer : tourner (-50de) ; } #r-bigfinger{ gauche : 50px ; transformer : tourner (50 degrés) ; } #l-petit doigt, #r-petit doigt{ taille : 35px ; largeur : 15px ; rayon de frontière : 50 % ; Contexte : #fff ; Position : relative ; haut : 195px ; gauche : 66px ; transformer : tourner (-40 degrés) ; } #r-smallfinger{ arrière-plan : #fff ; Transformer : Tourner (40°) ; haut : 195px ; à gauche : 37 px ; } /*cuisse*/ #left-jambe, #right-jambe{ hauteur : 170px ; largeur : 90px ; rayon de frontière : 40 % 30 % 10px 45 % ; Contexte : #fff ; Position : relative ; haut : -640px ; à gauche : -45px ; transformer : tourner (-1de) ; indice z : -2 ; marge : 0 auto ; } #right-jambe{ arrière-plan : #fff ; rayon de frontière : 30 % 40 % 45 % 10px ; marge : 0 auto ; top : -810px ; gauche : 50px ; transformer : tourner (1 degré) ; </style><body> } <div id="baymax">  <div id="tête"> <div id="œil"></div> <div id="eye2"></div> <div id="mouth"></div> </div>  <div id="torse"> <div id="cœur"></div> </div>  <div id="ventre"> <div id="couverture"></div> </div>  <div id="bras gauche"> <div id="l-gros doigt"></div> <div id="l-petit-doigt"></div> </div>  <div id="bras-droit"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div>  <div id="jambe gauche"></div>  <div id="jambe droite"></div> </div></body><html>

QWERTYU · Publié sur 05/12/2017 09:10:05

Le code peut être modifié

Admin · Publié sur 05/12/2017 09:21:19

Dabai est bien

J’ai trié le code

La connexion est visible.

[CSS/DIV] Les débutants jouent un peu de technologie noire en CSS

Score

Sections vues