CSS中设置元素的圆角矩形
圆角矩形介绍
- 在
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>
- 设置下半圆形
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: 0px 0px 50px 50px ; } </style> </head> <body> <div></div> </body> </html>