• 技术文章 >web前端 >css教程

    css怎么给图片添加投影效果

    长期闲置长期闲置2021-11-26 10:25:38原创43

    在css中,可以利用“box-shadow”属性来给图片元素添加投影效果,该属性的作用是给元素框添加阴影,只需要向图片元素添加“box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色 inset;”样式即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css怎么给图片添加投影效果

    在css中可以利用box-shadow属性来给图片添加投影效果,该属性能够向框添加一个或多个阴影。该属性的语法为:

    box-shadow: h-shadow v-shadow blur spread color inset;

    其中需要注意的是:

    04.png

    下面我们通过示例来看一下怎样利用box-shadow属性来给图片元素添加投影效果,示例如下:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>123</title>
        <style>
          div{
                width:300px;
                height:200px;
                background:url(1118.02.png);
                box-shadow: 10px 10px 5px #888888;
            }
       </style>
      </head>
      <body>
      <div></div>
      </body>
    </html>

    输出结果:

    03.png

    (学习视频分享:css视频教程

    以上就是css怎么给图片添加投影效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么把字体拉长 下一篇:css怎样修改button宽度
    VIP会员

    相关文章推荐

    • css怎么调用class• css怎样更改img的边框颜色• 怎么用css控制表格的字体大小• css怎么设置<hr>的颜色• css怎么把字体拉长

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网