Box-shadow 生成器
这个可视化工具可以帮助你生成一个元素的 CSS box-shadow
相关代码,添加 box shadow 效果到你的 CSS 对象上。
Box-shadow 生成器可以向一个元素上添加一至多个 box shadow。
启动工具以后,你可以在顶侧右部找到一个长方形,那是要应用阴影效果的元素。当该元素被选择(首次加载页面时即如此)时你可以应用一些基本的样式:
要添加一个阴影,点击左上侧的“+”按钮,这就增加了一个阴影,并将其列在左边的栏里。现在你可以设置新阴影的值:
- 使用颜色选择器设置阴影的颜色(
color
)。 - 使用“inset”复选框设置阴影是否嵌入元素。
- 使用滑轨设置阴影元素的位置、模糊和扩展大小。
要添加另一个阴影,再次点击“+”。现在你设置的任何数值都将应用于这个新的阴影。用左上方的 ↑ 和 ↓ 按钮改变这两个阴影的应用顺序。再次选择第一个阴影,在左边的栏目中点击它。要更新元素本身的样式,请点击顶部标有“element”的按钮来选择它。
你可以为该元素添加 ::before
和 ::after
伪元素,并给它们加上盒状阴影。要在元素和它的伪元素之间进行切换,可以使用顶部标有“element”、“:before”和“:after”的按钮。
右下角的方框包含该元素的 CSS 和任何 before::
或 ::after
伪元素。
参见
- Border-image 生成器
-
该交互性工具可以让你可视化地创建边框图片(
border-image
属性)。 - Border-radius 生成器
-
该交互性工具可以让你可视化地创建圆角(
border-radius
属性)。