CSS圆角

 CSS圆角

中吾规者谓之圆。——《墨子·天志》

 

在逆战班中学习到了,如何利用CSS将一个矩形磨平了它的棱角:

CSS3圆角只需设置一个属性:border-radius。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有CSS度量值都可以使用:em、px、百分比等等。

比如下方是一个div做的方框:

只需要设置一个圆角半径为50px:

 

就变成了四个为50px的圆角图形:

 

border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

现在设置两个值:

 

现在变成了左上、右下为50px,左下、右上为10px的图形:

 

现在设置三个值:

 

现在变成了左上为50px,左下、右上为10px、右下为90px的图形:

 

现在设置为四个值:

 

就变成了左上10px、右上40px、右下70px、左下100px的图形:

 

当然也就可以对某一个角进行设置

  border-top-left-radius (左上)

 

  border-top-right-radius (右上)

 

   border-bottom-right-radius (右下)

 

  border-bottom-left-radius (左下)

 

 

扩展:

当然也就可以画圆了,只要你设置的宽高是相同的,圆角是宽高的一半,如下图:

 

 

猜你喜欢

转载自www.cnblogs.com/miss-vogel/p/12345197.html
今日推荐