Ai
1. Mova o mouse para dentro da página web e ele desaparece = =
*{ cursor: nenhum!importante; }2. Efeito simples de desfoque de texto
*{ cor: transparente; sombra de texto: #111 0 0 5px; }![]()
3. Múltiplas fronteiras
.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; margem: 50px auto; largura: 400px}![]()
4. Editar CSS em tempo real
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Operações simples em CSS
.div{ largura: cálculo(100% - 500px); }![]()
6、Raio de fronteira
Porque basicamente muitas pessoas usam dessa forma:
.div { raio de borda: 4px; }![]()
Um pouco mais de alta qualidade é assim:
.div { raio-borda: 4px 6px 6px 4px; }![]()
No entanto, é assim que a tecnologia negra suprema é utilizada:
.div { raio-borda: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Raio de borda Pode ser atribuído 8 valores:
A frente da corte afeta a direção horizontal, e a parte de trás da barra afeta a direção vertical.
Cada número representa quatro direções diferentes.
7、Contorno-deslocamento
Ao escrever CSS sob input, você estará familiarizado com as seguintes instruções:
entrada { outline : nenhum; }input:focus { outline : nenhum; É assim que se remove o wireframe azul padrão da caixa de entrada.
Existe também uma propriedade de deslocamento de contorno no CSS onde você pode definir a distância do wireframe padrão:
input { outline-offset: 4px ; }(Grupo de intercâmbio de aprendizagem front-end da web: 328058344 Nada de conversa fiada, não entre a menos que goste! Ajuste o tamanho do valor do atributo e você pode ver a mudança de distância do contorno.
Por fim, vou apresentar uma demonstração do grande branco antes dos fatos
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylsheet href="demo2.css"/> </head> <style> corpo { fundo: #595959; } #baymax{ /* está definido como center*/ margin: 0 auto; /*altura*/ altura: 600px; /*esconder transbordamento*/ transbordamento: escondido; } #head{ altura: 64px; largura: 100px; /*Defina o formato do canto arredondado como uma porcentagem*/raio de borda: 50%; /*antecedentes*/ antecedentes: #fff; margem: 0 auto; margem-bottom: -20px; /*Defina o estilo da borda inferior*/ borda-fundo: 5px sólido #e0e0e0; /*atributo define a ordem de empilhamento dos elementos; Elementos com ordem de pilha maior sempre estarão à frente dos elementos com ordem de pilha inferior*/ índice z: 100; /*Gerar elementos posicionados relativos*/ posição: relativa; } #eye, #eye2{ largura: 11px; altura: 13px; Contexto: #282828; raio de fronteira: 50%; posição: relativo; topo: 30px; esquerda: 27px; /*gire o elemento*/transforme: gire (8grau); } #eye2{ /*Faça girar simetricamente*/ transformar: girar(-8grau); esquerda: 69px; topo: 17px; } #mouth{ largura: 38px; altura: 1,5px; Contexto: #282828; posição: relativo; esquerda: 34px; topo: 10px; } /*Torso e abdômen*/ #torso, #belly{ margem: 0 auto; } altura: 200px; largura: 180px; Contexto: #fff; raio de fronteira: 47%; /*Definir borda*/ borda: 5px sólido #e0e0e0; Borda-topo: nenhuma; Z-Index: 1; } #belly{ altura: 300px; largura: 245px; margem-topo: -140px; índice z: 5; } #cover{ largura: 190px; Contexto: #fff; altura: 150px; margem: 0 auto; posição: relativo; topo: -20px; raio de fronteira: 50%; } /*coração*/ #heart{ width:25px; altura: 25px; raio de borda: 50%; posição: relativo; /*Adicionar efeitos de sombra ao redor da borda*/ caixa-sombra:2px 5px 2px #ccc inserido; Direita:-115px; topo: 40px; índice z: 111; Borda: 1px sólido #ccc; } /*braço*/ #left-braço, #right-braço{ altura: 270px; largura: 120px; raio de fronteira: 50%; Contexto: #fff; margem: 0 auto; posição: relativo; máximo: -350px; esquerda: -100px; transformar: girar (20º); índice z: -1; } #right-braço{ transformar: girar(-20grau); esquerda: 100px; topo: -620px; } /*dedo*/ #l-dedo-grande, #r-dedo-grande{ altura: 50px; largura: 20px; raio de fronteira: 50%; Contexto: #fff; posição: relativo; máximo: 250px; esquerda: 50px; transformar: girar (-50grau); } #r-dedo grande{ esquerda: 50px; transformar: girar (50graus); } #l-mindinho, #r-mindinho{ altura: 35px; largura: 15px; raio de fronteira: 50%; Contexto: #fff; posição: relativo; Top: 195px; esquerda: 66px; transformar: girar (-40grau); } #r-mindfinger{ fundo: #fff; transformar: girar (40graus); Top: 195px; esquerda: 37px; } /*coxa*/ #left-perna, #right-perna{ altura: 170px; largura: 90px; raio de borda: 40% 30% 10px 45%; Contexto: #fff; posição: relativo; topo: -640px; esquerda: -45px; transformar: girar (-1grau); índice z: -2; margem: 0 auto; } #right-perna{ fundo: #fff; raio de borda: 30% 40% 45% 10px; margem: 0 auto; topo: -810px; esquerda: 50px; transformar: girar (1grau); </style><body> } <div id="baymax"> <!-- Defina a cabeça, incluindo dois olhos, boca --> <div id="cabeça"> <div id="olho"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- Defina o tronco, incluindo o coração --> <div id="torso"> <div id="coração"></div> </div> <!-- Defina a barriga, abdômen, incluindo a cobertura (e a junção do tronco) --> <div id="barriga"> <div id="cover"></div> </div> <!-- Defina o braço esquerdo, incluindo dois dedos, um grande e um pequeno --> <div id="braço esquerdo"> <div id="l-dedo-grande"></div> <div id="l-mindinho"></div> </div> <!-- Defina o braço direito, que também inclui um dedo grande e um pequeno --> <div id="braço direito"> <div id="r-dedo grande"></div> <div id="r-dedo pequeno"></div> </div> <!-- defina perna esquerda --> <div id="perna esquerda"></div> <!-- defina perna direita --> <div id="perna direita"></div> </div></body><html>![]()
|
Publicado em 04/12/2017 20:24:39
|
|
|
|
Publicado em 05/12/2017 09:10:05
|
Publicado em 05/12/2017 09:21:19
