| Kosten | Суббота, 04 Июля 2020 | Сообщение 1 |
| Давайте сначала поговорим об эффекте тени. Эффект тени можно использовать как для обычных элементов, так и для текста. Настройка очень проста для тени текста, это означает, что тень направления оси X составляет 5 пикселей вправо, тень направления оси Y вниз на 2 пикселя, радиус размытия тени равен 6 пикселям, а цвет - rgba (64, 64, 64, 0.5).
Тени элементов и текста
CSS
Код .class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
Смещение может быть отрицательным значением, а отрицательное значение находится в противоположном направлении.
Далее поговорим об отражении, он выглядит как отражение в воде, и его настройка очень проста, обратитесь к следующему коду:
Код .classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
Настройка также очень проста, где каждый в основном обращает внимание на «-webkit-box-reflect: ниже 10px», он говорит, что отражение находится на 10px ниже элемента, а затем в сочетании с эффектом градиента картина видимого эффекта выглядит следующим образом.
CSS3 фоновые эффекты
У CSS3 есть еще несколько фоновых атрибутов, которые мы кратко представим здесь:
* background-clip: border-box; фон отображается от границы;
* background-clip: padding-box; фон отображается из отступов;
* background-clip: content-box; область фонового содержимого начинает отображаться;
* background-clip: no-clip; свойство по умолчанию, эквивалентное border-box;
Обычно наш фон покрывает весь элемент и теперь CSS3 позволяет вам указать, нужно ли вам это делать.
Второе: используется для определения положения фона, обычно оно используется в сочетании с background-position, где вы можете рассчитать background-position из границы, отступов, контента (как background-clip).
* background-origin: border-box; вычислить положение фона по границе;
* background-origin: padding-box; вычислить background-position из отступов;
* background-origin: content-box; вычислить background-position из контента;
Кроме того размер фона обычно используемый для настройки размера фонового изображения, где не следует путать с клипом, это в основном используется для установки самого изображения.
| | Страна: (RU) |
| |
