排行榜 统计
  • 文章总数:1548 篇
  • 评论总数:5 条
  • 分类总数:7 个
  • 最后更新:11小时前
原创程序人生

div 元素添加阴影效果

本文阅读 1 分钟
首页 程序人生 正文

要为 <div> 元素添加阴影效果,你可以使用 CSS 的 box-shadow 属性。以下是一个示例:

<style>
  .shadow-box {
    width: 200px;
    height: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
</style>

<div class="shadow-box">
  <!-- 这里是 div 内容 -->
</div>

上述代码创建了一个宽高为 200px 的 <div> 元素,并为其添加了一个位于底部的阴影效果。box-shadow 属性接受四个值:水平偏移量、垂直偏移量、模糊半径和颜色值。在示例中,水平偏移量为 0,垂直偏移量为 2px,模糊半径为 4px,颜色为 rgba(0, 0, 0, 0.2),即黑色带有 20% 的不透明度的阴影。你可以根据需要调整这些值来达到想要的效果。

原创文章,作者:Firshare,如若转载,请注明出处:https://typecho.firshare.cn/archives/2117.html
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。避免网络欺诈,本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易,则需自行承担后果。本站在注明来源的前提下推荐原文至此,仅作为优良公众、公开信息分享阅读,不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
-- 展开阅读全文 --
css 如何引入字体文件
« 上一篇 07-26
ul 给第一个li设定单独样式
下一篇 » 07-26