/* ================== 阴影 ==================== */ /* -- 形状阴影 -- */ .shadow[class*='white'] { --ShadowSize: 0 1rpx 6rpx; } .shadow-large { --ShadowSize: 0rpx 40rpx 100rpx 0rpx; } .shadow-warp { position: relative; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); } .shadow-warp:before, .shadow-warp:after { position: absolute; content: ""; top: 20rpx; bottom: 30rpx; left: 20rpx; width: 50%; box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2); transform: rotate(-3deg); z-index: -1; } .shadow-warp:after { right: 20rpx; left: auto; transform: rotate(3deg); } .shadow-blur { position: relative; } .shadow-blur::before { content: ""; display: block; background: inherit; filter: blur(10rpx); position: absolute; width: 100%; height: 100%; top: 10rpx; left: 10rpx; z-index: -1; opacity: 0.4; transform-origin: 0 0; border-radius: inherit; transform: scale(1, 1); } .shadow { box-shadow: var(--ShadowSize) var(--greyShadow); } .shadow[class*="-red"] { box-shadow: var(--ShadowSize) var(--redShadow); } .shadow[class*="-orange"] { box-shadow: var(--ShadowSize) var(--orangeShadow); } .shadow[class*="-yellow"] { box-shadow: var(--ShadowSize) var(--yellowShadow); } .shadow[class*="-olive"] { box-shadow: var(--ShadowSize) var(--oliveShadow); } .shadow[class*="-green"] { box-shadow: var(--ShadowSize) var(--greenShadow); } .shadow[class*="-darkgreen"] { box-shadow: var(--ShadowSize) var(--darkgreenShadow); } .shadow[class*="-cyan"] { box-shadow: var(--ShadowSize) var(--cyanShadow); } .shadow[class*="-blue"] { box-shadow: var(--ShadowSize) var(--blueShadow); } .shadow[class*="-purple"] { box-shadow: var(--ShadowSize) var(--purpleShadow); } .shadow[class*="-mauve"] { box-shadow: var(--ShadowSize) var(--mauveShadow); } .shadow[class*="-pink"] { box-shadow: var(--ShadowSize) var(--pinkShadow); } .shadow[class*="-brown"] { box-shadow: var(--ShadowSize) var(--brownShadow); } .shadow[class*="-grey"] { box-shadow: var(--ShadowSize) var(--greyShadow); } .shadow[class*="-gray"] { box-shadow: var(--ShadowSize) var(--grayShadow); } .shadow[class*="-black"] { box-shadow: var(--ShadowSize) var(--blackShadow); } .shadow[class*="-white"] { box-shadow: var(--ShadowSize) var(--blackShadow); }