天富娱乐登录体育真人首存1元送18彩金?【CSS教程】

更新时间:2021年08月10日15时06分来源:传智教育浏览次数:

CSS3语法：

 border-radius:length;

1.用CSS3画圆

使用CSS3画圆的技巧：让一个正方形变成圆形，使 length=正方形边长/2。

代码：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用CSS画圆</title> <style> div{ background-color: #000; height: 200px; width: 200px; /* length为正方形边长的的一般 */ border-radius: 50%; } </style> </head> <body> <div> </div> </body> </html>

效果:

2.用CSS3换圆角矩形

用CSS3换圆角矩形技巧：矩形就只用高度的一半就好了，length=height/2。

代码：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用CSS画圆</title> <style> div{ background-color: #000; height: 100px; width: 300px; /* length具体尺寸*/ border-radius: 20px; } </style> </head> <body> <div> </div> </body> </html>

效果：

CSS画圆角矩形