hr标签实现浮雕效果的方法

2023年8 月3日 / 网站源码 / 1条 / 4,072次

龙哥在前面文章《hr标签用css实现分隔线玩出新花样》里介绍过集中hr标签的分隔线效果，下面介绍的是实现hr标签实现浮雕效果的方法。

在hr标签的样式里添加一下代码：

  1. clear: both;
  2. float: none;
  3.  width: 100%;
  4. height: 2px;
  5.  line-height: 2px;
  6. font-size: 0;
  7.  margin: 1.4em 0;
  8.  border: none 0;
  9.  background: #ddd;
  10. background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0.5, rgb(221,221,221)),color-stop(0.5, rgb(255,255,255)));
  11.  background-image: -webkit-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
  12.  background-image: -o-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
  13. background-image: -moz-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);

以上代码能很完美的实现hr标签浮雕效果，相关样式可以根据需要调整，但是前提是需要结合背景颜色来实现，建议背景颜色设置成#f3f3f3左右的颜色。

关键词:

时间：2023年8 月3日，星期四，下午9:17。
通过 RSS 2.0 订阅源关注。

«
»

《hr标签实现浮雕效果的方法》有1条评论

  1. 楚狂人说道：
    2023年12月18日 上午6:10

    效果很漂亮

    回复

提交评论

同类文章