15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 vue/vuex

0 0

使用css属性来绘制特殊图案

李家霖| 发布于 2021-07-06 22:24:34| 593阅读| 0点赞| 0评论

利用了css的border-radio来绘制一个圆弧、圆环与扇形

border-radio 可以控制一个元素的四个角如何切圆接收四个值分别设置左上右上右下左下

代码：

		.box{
         　　　　　　　 width: 150px;
			height: 150px;
			background-color: rgb(0, 0, 0);
			border-radius:10px 20px 30px 40px;
		}

效果：

通过控制四个角的切角弧度可以创造出一个扇形

代码：

		.box{
                       width: 150px;
			height: 150px;
			background-color: rgb(0, 0, 0);
			border-radius:150px 0px 0px 0px;
		}

效果：

border边框也是在且圆范围之内的所以设置一个border 然后在将背景颜色设置成透明即可的到一个圆弧

代码：

		.box{
                        width: 150px;
			height: 150px;
			border: 10px solid;
			border-right:none ;
			border-bottom: none;
			background-color: rgba(0, 0, 0, 0);
			border-radius:160px 0px 0px 0px;
		}

效果:

设置成圆环

代码：

		.box{
                        width: 150px;
			height: 150px;
			border: 10px solid;
			background-color: rgba(0, 0, 0, 0);
			border-radius:50%;
		}

效果：