Auć
1. Przesunąć mysz na stronę internetową i zniknie = =
*{ kursor: żadna! ważne; }2. Prosty efekt rozmycia tekstu
*{ kolor: przezroczysty; tekst-cień: #111 0 0 5px; }![]()
3. Wiele granic
.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); wysokość: 200px; marża 50px auto; szerokość: 400px}![]()
4. Edytuj CSS w czasie rzeczywistym
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Proste operacje w CSS
.div{ szerokość: calc(100% - 500px); }![]()
6、promień granicy
Bo zasadniczo wiele osób używa tego w ten sposób:
.div { promień granicy: 4px; }![]()
Trochę bardziej ekskluzywne brzmi tak:
.div { border-radius: 4px 6px 6px 4px; }![]()
Jednak tak właśnie wykorzystuje się najwyższą czarną technologię:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Promień granicy Można przypisać 8 wartości:
Przód ukośnika wpływa na kierunek poziomy, a tył ukośnika na kierunek pionowy.
Każda liczba reprezentuje cztery różne kierunki.
7、kontur-przesunięcie
Pisząc CSS pod wejściem, będziesz znać następujące stwierdzenia:
input { outline : none; }input:focus { outline : none; Tak właśnie usuwa się domyślny niebieski wireframe z pola wejściowego.
W CSS istnieje także właściwość przesunięcia konturu, gdzie można ustawić odległość domyślnego wireframe'u:
input { outline-offset: 4px ; }(Internetowa grupa wymiany nauki na front-endzie: 328058344 Bez small talków, nie wchodź, jeśli ci się to podoba! Dostosuj rozmiar wartości atrybutu, a zobaczysz zmianę odległości konturu.
Na koniec przedstawię demonstrację wielkiego białego przed faktami
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> Ciało { tło: #595959; } #baymax{ /* ustawiony na środek*/ margines: 0 auto; /*wysokość*/ wysokość: 600px; /*ukryj przelew*/ przepełnienie: ukryte; } #head{ wysokość: 64px; szerokość: 100px; /*Zdefiniuj kształt zaokrąglonego narożnika jako procent*/promień granicy: 50%; /*tło*/ tło: #fff; margines: 0 auto; margines-dolny margines: -20px; /*Ustaw styl dolnej ramki*/ obramowanie na dole: 5px jednolity #e0e0e0; /*atrybut ustala kolejność układania elementów; Elementy o wyższym rzędzie stosu zawsze będą przed elementami o niższym rzędzie stosu*/ indeks z: 100; /*Generuj względnie położone elementy*/ pozycja: względna; } #eye, #eye2{ szerokość: 11px; wysokość: 13px; Tło: #282828; promień granicy: 50%; pozycja: względna; góra: 30px; po lewej: 27px; /*obróć element*/transformacja: obróć (8°); } #eye2{ /*Obróć go symetrycznie*/ transformuj: obróć(-8°); po lewej: 69px; góra: 17px; } #mouth{ szerokość: 38px; wysokość: 1,5px; Tło: #282828; pozycja: względna; po lewej: 34px; góra: 10px; } /*Tułów i brzuch*/ #torso, #belly{ margines: 0 auto; } wysokość: 200px; szerokość: 180px; Tło: #fff; promień granicy: 47%; /*Ustaw ramkę*/ ramka: 5px solidna #e0e0e0; Border-top: brak; Indeks z: 1; } #belly{ wysokość: 300px; szerokość: 245px; margines: -140px; Z-indeks: 5; } #cover{ szerokość: 190px; Tło: #fff; wysokość: 150px; margines: 0 auto; pozycja: względna; góra: -20px; promień granicy: 50%; } /*serce*/ #heart{ szerokość:25px; wysokość: 25px; promień granicy: 50%; pozycja:względna; /*Dodaj efekty cienia wokół ramki*/ cień pudełkowy: 2px 5px 2px #ccc wstawione; prawa: -115px; góra: 40px; z-indeks: 111; ramka: 1px solidny #ccc; } /*arm*/ #left-arm, #right-arm{ wysokość: 270px; szerokość: 120px; promień granicy: 50%; Tło: #fff; margines: 0 auto; pozycja: względna; góra: -350px; po lewej: -100px; transform: obróć (20°); Z-indeks: -1; } #right-arm{ transform: rotate(-20°); lewo: 100px; góra: -620px; } /*palec*/ #l-bigfinger, #r-bigfinger{ wysokość: 50px; szerokość: 20px; promień granicy: 50%; Tło: #fff; pozycja: względna; góra: 250px; po lewej: 50px; transform: obróć (-50°); } #r-bigfinger{ lewo: 50px; transform: obróć (50°); } #l-małopalc, #r-małopalce{ wysokość: 35px; szerokość: 15px; promień granicy: 50%; Tło: #fff; pozycja: względna; góra: 195px; po lewej: 66px; transform: obróć (-40°); } #r-smallfinger{ tło: #fff; transform: obróć (40°); góra: 195px; po lewej: 37px; } /*udo*/ #left-noga, #right-noga{ wysokość: 170px; szerokość: 90px; promień rabatowy: 40% 30% 10px 45%; Tło: #fff; pozycja: względna; góra: -640px; po lewej: -45px; transform: obróć (-1°); Z-indeks: -2; margines: 0 auto; } #right-noga{ tło: #fff; promień granicy: 30% 40% 45% 10px; margines: 0 auto; góra: -810px; po lewej: 50px; transform: obróć (1 stopni); </style><body> } <div id="baymax"> <!-- Zdefiniuj głowę, w tym dwa oczy, usta --> <div id="głowa"> <div id="oko"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- Zdefiniuj tułów, w tym serce --> <div id="torso"> <div id="serce"></div> </div> <!-- Zdefiniuj brzuch, brzuch, w tym osłonę (i złącze tułowia) --> <div id="brzuch"> <div id="cover"></div> </div> <!-- Zdefiniuj lewą rękę, w tym dwa palce, jeden duży i jeden mały --> <div id="lewa ręka"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Zdefiniuj prawą rękę, która obejmuje także jeden duży i jeden mały palec --> <div id="prawy ręka"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- zdefiniować lewą nogę --> <div id="lewa noga"></div> <!-- zdefiniować prawą nogę --> <div id="prawa-noga"></div> </div></body><html>![]()
|
Opublikowano 04.12.2017 20:24:39
|
|
|
|
Opublikowano 05.12.2017 09:10:05
|
Opublikowano 05.12.2017 09:21:19
