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

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

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

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

  1. clearboth;
  2. floatnone;
  3.  width: 100%;
  4. height2px;
  5.  line-height2px;
  6. font-size: 0;
  7.  margin: 1.4em 0;
  8.  bordernone 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左右的颜色。


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

  1. 楚狂人说道:

    效果很漂亮


提交评论