Чтобы получить тени, давайте сначала разберемся с box-shadowэтим свойством.
Определение на MDN:
box-shadowатрибут используется для добавления эффекта тени к рамке элемента. Вы можете установить несколько эффектов тени на один и тот же элемент, разделяя их запятыми. Значения, которые можно установить для этого свойства, включают смещение тени по оси X, смещение по оси Y, радиус размытия, радиус диффузии и цвет.
грамматика:
/ ** 阴影扩散方向｜X 轴偏移量｜Y 轴偏移量｜模糊半径 ｜扩散半径｜颜色 */
box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] [color] ;
/**
注意：当给出两个、三个或四个 <length>值时
1、如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。
2、如果给出了第三个值，那么第三个值将会被当作<blur-radius>解释。
3、如果给出了第四个值，那么第四个值将会被当作<spread-radius>来解释。
*/
Что ж, подготовка завершена, переходим непосредственно к теме.
1. Односторонняя тень
Конкретная реализация выглядит следующим образом:
/** border:1px solid #BFBFBF; */
/** 上阴影 */
.top {
box-shadow: 0px -3px 3px -2px #aaa;
}
/** 右阴影 */
.right {
box-shadow: 3px 0 3px -2px #aaa;
}
/** 下阴影 */
.bottom {
box-shadow: 0px 3px 3px -2px #aaa;
}
/** 左阴影 */
.left {
box-shadow: -3px 0 3px -2px #aaa;
}
Эффект показан на рисунке:
2. Двусторонняя тень
Конкретная реализация выглядит следующим образом:
/** 右上阴影 */
.right-top {
box-shadow: 3px -3px 3px -2px #aaa;
}
/** 右下阴影 */
.right-bottom {
box-shadow: 3px 3px 3px -2px #aaa;
}
/** 左下阴影 */
.left-bottom {
box-shadow: -3px 3px 3px -2px #aaa;
}
/** 左上阴影 */
.left-top {
box-shadow: -3px -3px 3px -2px #aaa;
}
/** 上下阴影 */
.top-bottom {
/** 上阴影+下阴影 */
box-shadow: 0px -3px 3px -2px #aaa, 0px 3px 3px -2px #aaa;
}
/** 左右阴影 */
.left-right {
/** 左阴影+右阴影 */
box-shadow: -3px 0 3px -2px #aaa, 3px 0 3px -2px #aaa;
}
Эффект показан на рисунке:
3. Трехсторонняя тень
Верхние и нижние тени, а также левые и правые тени выше получаются за счет комбинации, поэтому трехсторонняя тень также может быть выполнена таким же образом.
Конкретная реализация выглядит следующим образом:
/** 无上阴影 */
.no-top {
/** 左下阴影+右下阴影 */
box-shadow: -3px 3px 3px -2px #aaa, 3px 3px 3px -2px #aaa;
}
/** 无右阴影 */
.no-right {
/** 左上阴影+左下阴影 */
box-shadow: -3px -3px 3px -2px #aaa, -3px 3px 3px -2px #aaa;
}
/** 无下阴影 */
.no-bottom {
/** 左上阴影+右上阴影 */
box-shadow: -3px -3px 3px -2px #aaa, 3px -3px 3px -2px #aaa;
}
/** 无左阴影 */
.no-left {
/** 右上阴影+右下阴影 */
box-shadow: 3px -3px 3px -2px #aaa, 3px 3px 3px -2px #aaa;
}
Эффект показан на рисунке:
здесь часть тени почти такая же.Если вы хотите добиться полной тени, установите смещение на 0 и установите радиус размытия.
Приглашаем всех учиться и общаться вместе!