Новачки грають у чорні технології в CSS

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

Ай
1. Перемістіть мишу на веб-сторінку — і вона зникне = =
*{ курсор: none!important; }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; margin: 50px auto; ширина: 400px}
4. Редагувати CSS у режимі реального часу
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Прості операції в CSS
.div{ ширина: calc(100% - 500px); }
6、радиус кордону
Бо по суті багато людей використовують це так:
.div { border-radius: 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> тіло { фон: #595959; } #baymax{ /* встановлено в центрі*/ margin: 0 auto; /*висота*/ висота: 600px; /*приховувати переповнення*/ переповнення: приховано; } #head{ висота: 64px; ширина: 100px; /*Визначте форму округлого кута у відсотках*/радіус межі: 50%; /*фон*/ фон: #fff; margin: 0 auto; Margin-bottom: -20px; /*Встановіть стиль нижньої рамки*/ бордюр-низ: 5px суцільний #e0e0e0; /*атрибут встановлює порядок накопичення елементів; Елементи з вищим порядком стеку завжди будуть попереду елементів із нижчим порядком стеку*/ z-індексом: 100; /*Генерувати відносні позиційні елементи*/ position: relative; } #eye, #eye2{ ширина: 11px; висота: 13px; Передісторія: #282828; радіус межі: 50%; позиція: відносна; верх: 30px; ліворуч: 27px; /*обертати елемент*/трансформувати: обертати (8 градусів); } #eye2{ /*Зробіть симетричне обертання*/ трансформація: rotate(-8deg); ліворуч: 69px; верх: 17px; } #mouth{ ширина: 38px; висота: 1.5px; Передісторія: #282828; позиція: відносна; ліворуч: 34px; верх: 10px; } /*Торс і живіт*/ #torso, #belly{ margin: 0 auto; } висота: 200px; ширина: 180px; Передісторія: #fff; радіус кордону: 47%; /*Встановити рамку*/ рамку: 5px суцільний #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-індекс:111; межа: 1px суцільний #ccc; } /*рука*/ #left-рука, #right-рука{ висота: 270px; ширина: 120px; радіус межі: 50%; Передісторія: #fff; margin: 0 auto; позиція: відносна; верхній: -350px; ліворуч: -100px; Трансформація: Обертати (20 градусів); z-індекс: -1; } #right-arm{ перетворення: rotate(-20deg); ліворуч: 100px; верх: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ висота: 50px; ширина: 20px; радіус межі: 50%; Передісторія: #fff; позиція: відносна; верх: 250px; ліворуч: 50px; Трансформація: Обертати (-50 градусів); } #r-bigfinger{ ліворуч: 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{ фон: #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="покрив"></div> </div>  <div id="ліва рука"> <div id="l-великий палець"></div> <div id="l-малий палець"></div> </div>  <div id="права рука"> <div id="r-bigfinger"></div> <div id="r-малий палець"></div> </div>  <div id="ліва нога"></div>  <div id="права нога"></div> </div></body><html>

QWERTYU · Опубліковано 05.12.2017 09:10:05

Код можна редагувати

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

Дабай — хороший

Розібрався з кодом

Вхід видно.

[CSS/DIV] Новачки грають у чорні технології в CSS

Забити

Переглянуті розділи