渐变边框的css实现【border-image属性、linear-gradient属性】

最新推荐文章于 2024-06-20 16:13:28 发布

weixin_44689966

最新推荐文章于 2024-06-20 16:13:28 发布

阅读量589

点赞数 1

本文链接：https://blog.csdn.net/weixin_44689966/article/details/126073638

版权

实现效果

竖直边框（中间实心，两端透明）

在这里插入图片描述

实现代码

<style>
  .borderimg {
    border: 4px solid;
    border-image: linear-gradient(transparent, red, transparent) 1;
    margin: auto;
    width: 100px;
    height: 100px;
  }
</style>

<script>
</script>

<body>
  <div class="borderimg">边框变色</div>
</body>

linear-gradient

可以设置三个颜色

效果

在这里插入图片描述

代码

<style>
  .borderimg {
    border: 4px solid;
    border-image: linear-gradient(pink, black, skyblue) 1;
    margin: auto;
    width: 100px;
    height: 100px;
  }
</style>
<script>
</script>

<body>
  <div class="borderimg">边框变色</div>
</body>

水平边框（中间实心，两端透明）

效果

在这里插入图片描述

代码（就是加了个角度）

<style>
  .borderimg {
    border: 4px solid;
    border-image: linear-gradient(90deg, transparent, red, transparent) 1;
    margin: auto;
    width: 100px;
    height: 100px;
  }
</style>
<script>
</script>

<body>
  <div class="borderimg">边框变色</div>
</body>