设置border-radius

			  border-radius 
			    (圆角设置)

开发工具与关键技术:Dream weaver 、CSS样式  

作者:曾子千

撰写时间:2019年1月31日

我们如果想要一个正方形的元素达成border-radius,那么该如何去达成相对应的效果呢?

首先创建一个div,给它一个长宽高,背景颜色,最后添加一个border-radius(圆角设置)样式

在CSS样式里有俩种写法,一种是用px来设置,另一种是用%来设置,你想弄小一点的圆角用px设置来方便
在这里插入图片描述
但是想弄得大一点的话,比如说一个圆,最好用%来设置,因为你用px设置的话,那么要一个圆形需要时间去调;但是用%来设置的话,调整一半50%就是一个完美的圆!
在这里插入图片描述
有一点要注意的是你想弄一个圆的话,用px设置你无法一下子设置成一个圆形,需要慢慢地调整!但是用%来设置的话,就可以快速轻松设置50%,从而达到出来的是一个真正的圆形效果!

效果图:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_44484894/article/details/88948293