使用CSS3创建图像阴影

更新了

CSS3中的我个人最喜欢的一个功能之一是使用盒子阴影。

CSS(层叠样式表)是一种用于描述您网站的外观和格式的样式表语。在您的样式表文档中有几条快速行,我们可以为我们的HTML元素创建很好的丢弃阴影,如上面的图像上。这是您的逐步指南:

  1. 回到'呃。

    耽误!在对您的网站进行任何更改之前,请记住备份您的网站。我们知道这是一种痛苦。继续,无论如何做。尝试使用其中一个方便插件自动化过程。

  2. 在代码编辑器中打开您的样式表文件。

    您的样式表通常名为“style.css”。如果您不确定如何执行此操作,点击这里(我们建议脱机编辑文件)。

  3. 插入代码片段。
    img {-webkit-box阴影:3px 3px 3px#7c7c7c;盒子阴影:3px 3px 3px#7c7c7c;}

    复制上面的代码并将其粘贴到样式表中。在这个片段中,我们瞄准了IMG.元素和应用盒子阴影:

    我们的属性选择器是:盒子阴影
    我们的房产是:X-Offset Y-Offset模糊颜色

    属性选择器可帮助您针对要在图像元素上更改的内容。属性是您可以更改或样式的属性选择器的标准部分。在这种情况下,您可以更改阴影的方向(X-Offset Y-Offset),阴影是多大的(模糊)和你的阴影的颜色。颜色由样式表中的代码表示。在这种情况下,我们正在使用六角彩色系统。

  4. 使用FTP将样式表文件上传到网站。

    如果您不确定如何执行此操作,点击这里

  5. 刷新您的网站。

    单击浏览器中的“重新加载”按钮。

    现在,您的图像将具有美丽的丢弃阴影。

  6. Finito!

    关闭笔记本电脑。这里没有什么可以做的。

通讯
加入280,000独立网站所有者

加入我们每月通讯的下一个人获得25%的优惠券!

我们保证100%隐私。您的信息将不会被共享。

14关于“使用CSS3创建图像阴影”的想法

    1. 不,如果你去CSS文件并添加一个新的类,它将工作。例如,作为zane仅使用img,你可以做一些类似的事情

      #shadows img {

      -webkit-box阴影:3px 3px 3px#7c7c7c;

      盒子阴影:3px 3px 3px#7c7c7c;

      }
      然后在您的HTML中找到IMG标记并向它添加Class =“阴影”。

      1. 实际上,在您的CSS中,一个课程将以“。”为前缀。并不是 ”#”。您使用“#”引用元素的ID。您也不需要在CSS中引用“IMG”,因为类规范会照顾它。

        所以代码应该看起来像这样:

        .shadows {

        -webkit-box阴影:3px 3px 3px#7c7c7c;

        盒子阴影:3px 3px 3px#7c7c7c;

        }

        所以任何有分配给它的“阴影”的东西都会受到影响。

    2. 刚才

      -webkit-box阴影:没有;盒子阴影:没有

      对于那些不想阴影的课程出现像徽标,小部件等。

    1. 我也有这个问题,如何修复它是转到你的徽标CSS类示例我是

      #logo img {显示:块;最大宽度:100%;}

      然后,您必须在本教程中放入相同的代码,但更改为“无”。

      所以这将是这样的:

      #logo img {显示:块;最大宽度:100%;-webkit-box阴影:没有;盒子阴影:无}

  1. 谢谢你。这正是我正在寻找的!现在网站拥有更美丽的IMG,我不必回去再次拍摄屏幕才能使用暗影效果。你的教程拯救了我的生活。非常感谢你。

    如果您想了解它是如何快乐的,这就是我网站上的样子。http://wpthaiuser.com.我也为想要用WordPress制作网站的普通用户进行教程。(我试图指导他们没有或非常少的代码,但现在我也学会了代码。至少CSS。)

    非常感谢你。
    艾米莉

发表评论