使用CSS给图片添加阴影的方法

网页制作 2024/7/3 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？我们可以采取“视觉欺骗大法”——定义渐变边框来实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title></title> <style type="text/css" > body {background:#2e334d;} img {border:none;} a.pic-shadow {display:inline-block;zoom:1;padding:1px;background:#262a3f;border:solid #2b3048 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} a.pic-shadow img {padding:1px;background:#13151f;border:solid #1e2132 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} </style> </head> <body> <a class="pic-shadow" href="#" title=""><img src="/UploadFiles/2021-03-30/1911220.png"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode13')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode13)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode13)"> 提示：您可以先修改部分代码再运行<br>下面这段定义是各标准浏览器中圆角定义，用以更专业地欺骗眼睛 <br><br><u>复制代码</u>代码如下: <br>border-radius:5px; <br>-moz-border-radius:5px; <br>-webkit-border-radius:5px; <br><br>颜色代码可以在ps中做好外发光效果后拾取。我上面的效果是[柔和]、[扩展0]、[大小5px]、[颜色#000]其余默认 <br>当然了，特殊要求的话可以使用ie的滤镜来实现更华丽的阴影。 </p></div> </div> <div class="tags my-2"> <i class="iconfont icon-tags"></i><a href="/LoadingPageN/1/74710.html" rel="tag" class="tag-%e6%a0%b8%e6%b3%84%e6%bc%8f color-6" title="CSS,图片,阴影">CSS,图片,阴影</a> </div> <div class="post-apd"> <strong>标签：</strong><a href="/LoadingPageN/1/74710.html" title="CSS,图片,阴影"> <h5>CSS,图片,阴影</h5> </a> <Br /></div> <div class="post-apd">无为清净楼资源网 Design By www.qnjia.com</div> </div> </div> <div class="single-top-area text-sm clearfix card mt-4"> <div class="card-body"> <strong>广告合作：</strong>本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）<br> <strong>免责声明：</strong>本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com</a> </div> </div> <div class="near-navigation rounded mt-4 py-2"> <div class="nav previous border-right border-color"> <a class="near-permalink" href="#"> <span>上一篇</span> <h4 class="near-title"><a href="/LoadingPageN/1/74709.html" title="CSS 网页表单实现鼠标悬停交互效果">CSS 网页表单实现鼠标悬停交互效果</a></h4> </a> </div> <div class="nav next border-left border-color"> <a class="near-permalink" href="#"> <span>下一篇</span> <h4 class="near-title"><a href="/LoadingPageN/1/74711.html" title="css textarea 高度自适应,无滚动条">css textarea 高度自适应,无滚动条</a></h4> </a> </div> </div>  <div class="post-apd mt-4">无为清净楼资源网 Design By www.qnjia.com</div> <div id="comments" class="comments"> <h1 id="comments-list-title" class="comments-title h5 mx-1 my-4"> <i class="iconfont icon-comment"></i> <span class="noticom"> <a href="/LoadingPageN/1/74710.html#respond" class="comments-title" title="使用CSS给图片添加阴影的方法">评论“使用CSS给图片添加阴影的方法”</a> </span> </h1> <div class="card"> <div class="card-body"> <div id="respond_box"> <div id="respond" class="comment-respond"> <form action="#" method="post" id="commentform" class="text-sm mb-4"> <div class="visitor-avatar d-flex flex-fill mb-2"> <img class="v-avatar rounded-circle" src="/images/gravatar.jpg"> </div> <div class="comment-textarea mb-3"> <textarea name="comment" id="comment" class="form-control" placeholder="输入对“使用CSS给图片添加阴影的方法”评论内容..." tabindex="4" cols="50" rows="3">

暂无评论...

使用CSS给图片添加阴影的方法

更新日志

友情链接