Как веб-разработчик, CSS является одним из обязательных навыков. Я всегда думал, что моего мастерства в CSS достаточно, пока я не прочитал «CSS Demystified» Леа Веру и не обнаружил, что в лучшем случае я играю в CS. множество практичных и элегантных решений с разных точек зрения для наших общих проблем веб-дизайна. Это настоятельно рекомендуется каждому разработчику, связанному с интерфейсом. Я верю, что вы обязательно что-то выиграете.
Чтобы упростить копирование и вставку в будущем, автор суммирует мой собственный урожай и некоторые стили CSS, обычно используемые в моей работе, в этом документе, который содержит в общей сложности 43 стиля CSS (постоянно обновляется...). В документации еще много недочетов, давайте еще советов, если вы считаете, что это полезно для вас, то добро пожаловать вместе на доработку 📝~
What's included
границы и фоны
- Полупрозрачная граница
- несколько границ
- закругленные углы
- позиционирование фона
- полосатый фон
- 1px линия/край
общая форма
- круг и эллипс
- параллельный четырехугольник
- Эффект фаски
- Простая круговая диаграмма
- подсказка пузырь
- Другие полигоны
Визуальный эффект
- общая проекция
- неправильная проекция
- эффект матового стекла
- Полосы зебры
- текстовые эффекты
- Циркулярный текст
- вставить новую строку
- Контроль сравнения изображений
Пользовательский опыт
- Выберите соответствующий курсор мыши
- Расширить кликабельную область
- настраиваемый флажок
- пользовательская радиокнопка
- Поле ввода идеально центрировано
- Осветлить фон тенями
- Смягчение фона с помощью размытия
- пользовательское подчеркивание текста
- пользовательская полоса прокрутки прокрутки
Структурная схема
- Полное фоновое моноширинное содержимое по центру
- абсолютное дно
- Центрируется по горизонтали и вертикали
- Макет Святого Грааля
- Двухстворчатая компоновка
- Макет заказа класса
- Гибкая компоновка
анимация перехода
- эффект подпрыгивания
- сверхэластичность
- эффект мерцания
- эффект печати
- эффект дизеринга
- Бесшовный гладкий эффект
- Эффект сглаживания следов
Код в документе поддерживает предварительный просмотр отладки в реальном времени. Если у вас есть какие-либо вопросы или предложения, оставьте сообщение прямо под документом. Если у вас есть более интересные и практические навыки, добро пожаловать в добавление~
Документация:You-need-to-know-css
Гитхаб:LHammer/You-need-to-know-css(приветствуется пиар)
小小的吐槽一下：掘金的编辑器/markdown嵌入的badge在移动端为什么无法显示？