Новички играют в чёрные технологии в CSS

fanxiaolin84 · Опубликовано 04.12.2017 20:24:39

Ай
1. Переместите мышь на веб-страницу — и она исчезает = =
*{ курсор: нет!важно; }2. Эффект простого размытия текста
*{ цвет: прозрачный; text-shadow: #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; Margin: 50px auto; ширина: 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 { радиус границы: 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; Вот как удалить стандартный синий каркас из входного блока.
В CSS также есть свойство outline-offset, где можно задать расстояние от стандартного вайрфрейма:
input { outline-offset: 4px ; }(Группа обмена веб-интерфейсом обучения: 328058344 Без светских разговоров, не заходите, если вам не нравится! Отрегулируйте размер значения атрибута, и вы увидите изменение расстояния контура.
Наконец, я представлю демонстрацию большого белого перед фактами
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> Body { background: #595959; } #baymax{ /* установлена в центр*/ margin: 0 auto; /*высота*/ высота: 600px; /*скрыть переполнение*/ переполнение: скрыто; } #head{ высота: 64px; ширина: 100px; /*Определите форму округлённого угла в процентах*/радиус границы: 50%; /*фон*/ фон: #fff; Margin: 0 auto; Margin-bottom: -20px; /*Задайте стиль нижнего края*/ бордюр снизу: 5 пикселей сплошного #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%; /*Установить рамку*/ рамку: 5 пикселей сплошного #e0e0e0; верхняя граница: нет; z-индекс: 1; } #belly{ высота: 300px; ширина: 245px; верхняя граница: -140px; z-индекс: 5; } #cover{ ширина: 190px; Предыстория: #fff; высота: 150px; Margin: 0 auto; позиция: относительная; верх: -20px; радиус границы: 50%; } /*сердце*/ #heart{ ширина:25px; высота: 25px; радиус границы: 50%; позиция:относительная; /*Добавить эффекты теней по краю*/ box-shadow:2px 5px 2px #ccc вставка; справа:-115px; верх: 40px; z-index:111; border: 1px твёрдый #ccc; } /*рука*/ #left-рука, #right-рука{ высота: 270px; ширина: 120px; радиус границы: 50%; Предыстория: #fff; Margin: 0 auto; позиция: относительная; верхняя часть: -350px; слева: -100px; преобразование: вращать (20 градусов); z-индекс: -1; } #right-рычаг{ преобразование: вращать(-20 градусов); слева: 100px; верхняя часть: -620px; } /*finger*/ #l-большой палец, #r-bigfinger{ высота: 50px; ширина: 20px; радиус границы: 50%; Предыстория: #fff; позиция: относительная; верхняя часть: 250px; слева: 50px; преобразование: вращать (-50 градусов); } #r-большой палец{ слева: 50px; преобразование: вращать (50 градусов); } #l-мизинец, #r-мизинец{ высота: 35px; ширина: 15px; радиус границы: 50%; Предыстория: #fff; позиция: относительная; верхняя часть: 195px; Слева: 66px; преобразование: вращать (-40 градусов); } #r-малый палец{ фон: #fff; преобразование: вращать (40 градусов); верхняя часть: 195px; Слева: 37px; } /*бедро*/ #left-нога, #right-нога{ высота: 170px; ширина: 90px; радиус границы: 40% 30%, 10px 45%; Предыстория: #fff; позиция: относительная; верх: -640px; Слева: -45px; Преобразование: вращать (-1 градус); индекс z: -2; Margin: 0 auto; } #right-leg{ background: #fff; радиус границы: 30% 40%, 45% 10px; Margin: 0 auto; верхняя часть: -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="cover"></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 · Опубликовано 05.12.2017 9:10:05

Код можно редактировать

Администратора · Опубликовано 05.12.2017 9:21:19

Дабай хорош

Разобрался с кодом

Вход виден.

[CSS/DIV] Новички играют в чёрные технологии в CSS

Счёт

Просмотренные разделы