CSS3 在线生成工具：[2]生成Boxshadow阴影

来源：互联网 2023-03-16 19:17:41 186

阴影（Boxshadow）是CSS3的特性之一，该效果主要反应为立体效果或是说3D效果，下面向大家介绍如何使用在线CSS3工具-CSS3 Generator生成定制的并兼容各种浏览器的阴影特效CSS3代码。

工具/原料

浏览器

1. 打开CSS3在线设计工具网站CSS3 Generator

打开浏览器（最好不要用IE，因为IE对W3C标准的支持都不好），输入网址：“http://www.css3.me/”, 打开CSS3 Generator 。

CSS3 在线生成工具：[2]生成Boxshadow阴影

1相关内容未经许可获取自百度经验

2. 完成基本样式设置

点击“edit the basics”按钮，打开基本设置面板，设置border（边框）宽度、颜色、背景色。编辑面板如下图所示：

CSS3 在线生成工具：[2]生成Boxshadow阴影

点击border-radius面板右侧的“ ”展开border-radius设置面板，按需要设置四个边角的圆度。

CSS3 在线生成工具：[2]生成Boxshadow阴影

3. 打开box-shadow阴影设置面板

点击box-shadow右侧的“ ”用以展开box-shadow设置面板。

CSS3 在线生成工具：[2]生成Boxshadow阴影

4. 设置box-shadow阴影效果

设置阴影水平偏移量。在“horizontal”右侧的输入框中输入偏移量，其值可以是正数，也可以是负数。

正数：阴影在对象的右边。

负数：阴影在对象的左边。

CSS3 在线生成工具：[2]生成Boxshadow阴影

设置阴影垂直偏移量。在“vertical”右侧的输入框中输入偏移量，其值可为正数和负数。如果为正数，阴影在对象的底部，其值为负数时，阴影在对象的顶部。

CSS3 在线生成工具：[2]生成Boxshadow阴影

设置阴影模糊半径。在“blur”右侧的输入框中输入模糊半径值，其值为非负数，为0时，表示阴影不具有模糊效果，其值越大则阴影的边缘就越模糊。

CSS3 在线生成工具：[2]生成Boxshadow阴影

设置阴影扩展半径。在“spread”右侧的输入框中输入阴影扩展半径值，其值可正可负，如果为正，则整个阴影都延展扩大，为负则缩小。

CSS3 在线生成工具：[2]生成Boxshadow阴影

设置阴影色。在“shadow”右侧的颜色面板中选择阴影颜色，此参数可选, 如果不设定，浏览器会取默认色，但各浏览器默认色不一样，webkit内核的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色，最好不要省略此参数。

CSS3 在线生成工具：[2]生成Boxshadow阴影

设置阴影类型：支持两种阴影类型，外阴影和内阴影，此参数可选。如不设置，则默认外阴影，如设置为“inset”，则其投影类型为内阴影。

CSS3 在线生成工具：[2]生成Boxshadow阴影

5. 预览并生成CSS3样式代码

在右侧的预览面板预览设置后的阴影效果。

CSS3 在线生成工具：[2]生成Boxshadow阴影

点击“GET THE CODE!”按钮生成CSS3代码

CSS3 在线生成工具：[2]生成Boxshadow阴影

在生成的代码窗口选择支持的浏览器类型，然后点击“Select Code”拷贝样式代码到自己的代码中。

CSS3 在线生成工具：[2]生成Boxshadow阴影

生成兼容性Border

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS

上一篇：纯CSS实现动画边框的办法下一篇：移动端布局上下固定中间自适应

CSS3 在线生成工具：[2]生成Boxshadow阴影

工具/原料

1. 打开CSS3在线设计工具网站CSS3 Generator

2. 完成基本样式设置

3. 打开box-shadow阴影设置面板

4. 设置box-shadow阴影效果

5. 预览并生成CSS3样式代码

热门文章

标签列表