Новаците играят черна технология в CSS

fanxiaolin84 · Публикувано в 4.12.2017 г. 20:24:39 ч.

Ох
1. Преместете мишката в уеб страницата и тя изчезва = =
*{ курсор: няма!важно; }2. Ефект на прост размазване на текста
*{ цвят: прозрачен; текст-сянка: #111 0 0 5px; }
3. Множество граници
.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); височина: 200px; маргинал: 50px автоматично; ширина: 400px}
4. Редактирай CSS в реално време
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Прости операции в CSS
.div{ width: calc(100% - 500px); }
6、радиус на границата
Защото всъщност много хора го използват по следния начин:
.div { граничн радиус: 4px; }
Малко по-висок клас е така:
.div { border-radius: 4px 6px 6px 4px; }
Въпреки това, ето как се използва върховната черна технология:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

Граничн радиус Може да се присвоят 8 стойности:
Предната част на слеша влияе на хоризонталната посока, а задната част на наклонената черта влияе на вертикалната посока.
Всяко число представлява четири различни посоки.

7、outline-offset
Когато пишете CSS под вход, ще сте запознати със следните твърдения:
input { outline : none; }input:focus { outline : none; Това е начинът да премахнете стандартната синя wireframe от входната кутия.
Има и свойство за изместване на контури в CSS, където можете да зададете разстоянието на стандартния wireframe:
input { outline-offset: 4px ; }(Уеб фронтенд обменна група: 328058344 Без празни приказки, не влизай, освен ако не ти харесва! Настройте размера на стойността на атрибута и ще видите промяната на разстоянието на контура.
Накрая ще представя демонстрация на големия бял цвят пред фактите
<!doctype html<html> <head> > <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> Тяло { фон: #595959; } #baymax{ /* е настроен в център*/ margin: 0 auto; /*височина*/ височина: 600px; /*hide overflow*/ overflow: hidden; } #head{ височина: 64px; ширина: 100px; /*Дефинирайте формата на заобления ъгъл като проценти*/радиус на границата: 50%; /*фон*/ фон: #fff; марж: 0 авто; margin-bottom: -20px; /*Задайте стила на долния ръб*/ бордюр-долу: 5px плътен #e0e0e0; /*атрибут задава реда на наслагване на елементите; Елементите с по-висок ред на стека винаги ще бъдат пред елементите с по-нисък ред на стек*/ z-индекс: 100; /*Генериране на относително позиционирани елементи*/ позиция: относителна; } #eye, #eye2{ ширина: 11px; височина: 13px; Предистория: #282828; Радиус на границата: 50%; позиция: относителна; Горна част: 30px; ляво: 27px; /*завърти елемента*/трансформирай: завърти (8 градуса); } #eye2{ /*Направи го да се върти симетрично*/ трансформирай: ротация(-8 градуса); Ляво: 69px; Горна част: 17px; } #mouth{ ширина: 38px; височина: 1.5px; Предистория: #282828; позиция: относителна; Ляво: 34px; горе: 10px; } /*Торс и корем*/ #torso, #belly{ margin: 0 auto; } височина: 200px; ширина: 180px; Предистория: #fff; Радиус на границата: 47%; /*Задайте рамка*/ рамка: 5px плътна #e0e0e0; border-top: няма; z-индекс: 1; } #belly{ височина: 300px; ширина: 245px; горен ръб: -140px; z-индекс: 5; } #cover{ ширина: 190px; Предистория: #fff; височина: 150px; марж: 0 авто; позиция: относителна; горе: -20px; Радиус на границата: 50%; } /*сърце*/ #heart{ ширина:25px; височина: 25px; радиус на границата: 50%; позиция:относителна; /*Добавете ефекти на сенки около рамката*/ box-shadow:2px 5px 2px #ccc вмъкване; дясно:-115px; горно: 40px; z-индекс:111; border: 1px плътен #ccc; } /*ръка*/ #left-ръка, #right-ръка{ височина: 270px; ширина: 120px; Радиус на границата: 50%; Предистория: #fff; марж: 0 авто; позиция: относителна; Горна стойност: -350px; Ляво: -100px; трансформация: завърти (20 градуса); z-индекс: -1; } #right-arm{ трансформация: ротация(-20 градуса); ляво: 100px; Горна част: -620px; } /*пръст*/ #l-голям пръст, #r-голям пръст{ височина: 50px; ширина: 20px; Радиус на границата: 50%; Предистория: #fff; позиция: относителна; Горна част: 250px; ляво: 50px; трансформация: завърти (-50 градуса); } #r-голям пръст{ ляво: 50px; трансформация: завърти (50 градуса); } #l-малък пръст, #r-малък пръст{ височина: 35px; ширина: 15px; Радиус на границата: 50%; Предистория: #fff; позиция: относителна; Горна част: 195px; ляво: 66px; трансформация: завърти (-40 градуса); } #r-smallfinger{ фон: #fff; трансформация: завърти (40 градуса); Горна част: 195px; ляво: 37px; } /*бедро*/ #left-крак, #right-крак{ височина: 170px; ширина: 90px; Радиус на границата: 40% 30% 10px 45%; Предистория: #fff; позиция: относителна; Горна част: -640px; ляво: -45px; трансформация: завърти (-1 градуса); z-индекс: -2; марж: 0 авто; } #right-leg{ фон: #fff; Радиус на границата: 30% 40% 45% 10px; марж: 0 авто; горе: -810px; ляво: 50px; трансформация: завърти (1 градуса); </style><body> } <div id="baymax">  <div id="глава"> <div id="око"></div> <div id="eye2"></div> <div id="уста"></div> </div>  <div id="торс"> <div id="сърце"></div> </div>  <div id="корем"> <div id="покритие"></div> </div>  <div id="лява ръка"> <div id="l-голям пръст"></div> <div id="l-малък пръст"></div> </div>  <div id="дясна ръка"> <div id="r-голям пръст"></div> <div id="r-малък пръст"></div> </div>  <div id="ляв крак"></div>  <div id="десен крак"></div> </div></body><html>

QWERTYU · Публикувано в 5.12.2017 г. 9:10:05 ч.

Кодът може да бъде редактиран

Администратор · Публикувано в 5.12.2017 г. 9:21:19 ч.

Дабай е добър

Уредих кода

Входът е видим.

[CSS/DIV] Новаците играят черна технология в CSS

Резултат

Разгледани секции