解决使用border-image后border-radius不生效(使用background)

最新推荐文章于 2024-06-19 20:30:31 发布

Strive-x

最新推荐文章于 2024-06-19 20:30:31 发布

阅读量2.2k

点赞数 15

文章标签：前端 html css

本文链接：https://blog.csdn.net/2301_76742166/article/details/136217723

版权

概述

css使用渐变色边框，并且画圆，想到的第一个方法就是使用border-image和border-radius来实现，但是使用后发现使用border-image后border-radius不生效了 ,只能曲线救国，使用background中的linear-gradient来实现，但是又发现边框顶部有一些底部的颜色，最后使用了background-origin: border-box;才实现了最终的效果

代码

	.u-avatar {
        width:100px;
        height:100px;
		border: 8rpx solid transparent;
		border-radius: 50%;
		background: linear-gradient(#F0F2FF, #C0CAFF);
		/*
        background-origin: border-box;图像从边框开始显示,表示以表框左上角为原点展开背景图片
        */
		background-origin: border-box;
	}