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>