Синтаксис:
border-radius: top-left top-right
bottom-right bottom-left
Применяется к border и background
border-radius:50%
Синтаксис:
box-shadow: inset сдвиг по x сдвиг по y радиус размытия растяжение цвет
P.S. можно задать несколько теней через запятую
Синтаксис:
text-shadow: сдвиг по x сдвиг по y радиус размытия цвет
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
background: rgba ( *составляющая красного*, *составляющая зеленого*, *составляющая синего*, *составляющая alpha*);
h1 {
color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background
Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left.
Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient. В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет.
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
Задаёт матрицу преобразований.
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
transform: rotate(<угол>)
Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
Масштабирует элемент по горизонтали.
transform: scaleX(sx);
Масштабирует элемент по вертикали.
transform: scaleY(sy);
Наклоняет элемент на заданный угол по вертикали.
transform: skewX(<угол>)
Наклоняет элемент на заданный угол по горизонтали.
transform: skewY(<угол>)
Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
transform: translateX(tx)
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
transform: translateY(ty)
transition: [transition-property] [transition-duration] [transition-timing-function]
[transition-delay];
Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript
div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}