0


css实现border渐变样式

项目中用到了border的渐变使用,虽然可以使用图片,但不如代码实现效果好,所以实现了border两头渐变的效果

效果如图:

  1. .text-desc{
  2. width: 24%;
  3. height: 100%;
  4. box-sizing: border-box;
  5. /*必须设置border宽度和样式*/
  6. border-left: 3px solid;
  7. /*设置线性渐变*/
  8. border-image: linear-gradient(180deg, rgba(25, 162, 255, 0) 10%, rgba(20, 125, 202, 1) 50%, rgba(25, 162, 255, 0) 90%) 2 2 2 2;
  9. padding: 15px;
  10. cursor: default;
  11. }
标签: css html5 css3

本文转载自: https://blog.csdn.net/xiaoxiaoyang007/article/details/129593599
版权归原作者 蒙蒙的口香糖 所有, 如有侵权,请联系我们删除。

“css实现border渐变样式”的评论:

还没有评论