initial-scale=1.0 meta http-equiv=X-UA-Compatible content=i
标签：
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形。
border-radius属性值一共有4个，左上、右上、左下、右下。
border-radius属性值法则如下：第一个值为左上、第二个值为右上、第三个值为左下、第四个值为右下。
假如border-radius属性值都是一致的我可以设置一个属性值即可。
圆角矩形实践圆角矩形根基使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html>
如果我们的border-radius属性值一致实践。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 20px ; } </style> </head> <body> <div></div> </body> </html>
如果使用border-radius属性值将元素设置为圆形呢。
第一步：要设置的元素宽高度必需一致。
第二步：使用border-radius属性值必需是要设置的元素宽高度的一半。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 50px ; } </style> </head> <body> <div></div> </body> </html>
设置椭圆形实践
实现椭圆形border-radius属性值必需是元素的高度一半即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 50px; border: 2px solid rebeccapurple; border-radius: 25px ; } </style> </head> <body> <div></div> </body> </html> 设置半圆形设置右半圆形border-radius属性值左上、和右下为元素的宽度一致即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 50px; height: 100px; border: 2px solid rebeccapurple; border-radius: 50px 0px 0px 50px ; } </style> </head> <body> <div></div> </body> </html>设置左半圆形border-radius属性值右上、和左下为元素的宽度一致即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 50px; height: 100px; border: 2px solid rebeccapurple; border-radius: 0px 50px 50px 0px ; } </style> </head> <body> <div></div> </body> </html>设置上半圆形border-radius属性值左上、和右上为元素的高度一致即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 50px; border: 2px solid rebeccapurple; border-radius: 50px 50px 0px 0px ; } </style> </head> <body> <div></div> </body> </html>温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31165.html
- 上一篇：Arctic Network
- 下一篇：那么就促成JS的回调函数
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")