1px边框的渐变

最新推荐文章于 2024-07-05 17:35:21 发布

weixin_30954607

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanghaonull/p/7127546.html

<div class="box">banner</div>
    .box {
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 5px;
      background-color: #ccc;
      background-size: 0 2px;
      
      transition: all .5s ease;
      background-position: center bottom;
    }

    .box:hover {
      background: #ccc linear-gradient(to right, blue, blue) no-repeat center bottom;
      background-size: 100% 2px;
    }