在 css 中設置圓角主要通過 border-radius 屬性實現，1. 使用一個值可統一設置四個角；2. 使用兩個值分別設置對角；3. 單獨設置每個角的屬性；4. 使用百分比或 vw/vh 單位實現響應式圓角；5. 通過媒體查詢調整不同屏幕下的圓角大??；6. 對老舊瀏覽器采用優雅降級、css 前綴或 JavaScript 庫兼容；7. 利用不同值組合可創建半圓、四分之一圓及不規則形狀等復雜效果。
CSS 中設置圓角主要通過 border-radius 屬性來實現。它允許你控制元素邊框的圓角程度，使頁面設計更加柔和和美觀。
解決方案：
border-radius 屬性接受一個或兩個值。一個值時，表示所有四個角都應用相同的圓角半徑。兩個值時，第一個值應用于左上角和右下角，第二個值應用于右上角和左下角。你也可以單獨設置每個角的圓角半徑，使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 屬性。
立即學習“前端免費學習筆記（深入）”；
例如：
.rounded-box { width: 200px; height: 100px; background-color: #eee; border: 1px solid #ccc; border-radius: 10px; /* 所有角都應用 10px 的圓角 */ } .custom-rounded-box { width: 200px; height: 100px; background-color: #eee; border: 1px solid #ccc; border-top-left-radius: 20px; border-top-right-radius: 5px; border-bottom-right-radius: 20px; border-bottom-left-radius: 5px; } .oval-box { width: 200px; height: 100px; background-color: #eee; border: 1px solid #ccc; border-radius: 50%; /* 創建一個橢圓或者圓形 */ }
border-radius 還可以使用百分比值。百分比值相對于元素的寬度或高度，具體取決于哪個方向的半徑被設置。
CSS圓角屬性的兼容性問題及解決方案
border-radius 屬性在現代瀏覽器中得到了很好的支持，包括 chrome、firefox、safari、edge 和 Opera。 然而，對于一些老舊的瀏覽器，特別是 IE8 及更早版本，可能不支持 border-radius 屬性。
解決方案：
-
優雅降級： 對于不支持 border-radius 的瀏覽器，可以不顯示圓角效果，或者使用其他替代方案，例如使用圖片來模擬圓角。這可以通過條件注釋或 JavaScript 來實現。
<!--[if lt IE 9]> <style> .rounded-box { /* 使用圖片或其他替代方案模擬圓角 */ background: url('rounded-corners.png') no-repeat; } </style> <![endif]--> -
使用 CSS 前綴： 雖然現代瀏覽器已經不再需要，但為了兼容一些較老的瀏覽器版本，可以考慮添加 CSS 前綴。
.rounded-box { -webkit-border-radius: 10px; /* Safari 和 Chrome */ -moz-border-radius: 10px; /* Firefox */ border-radius: 10px; /* 標準語法 */ } -
使用 JavaScript 庫： 有一些 JavaScript 庫可以幫助在不支持 border-radius 的瀏覽器中模擬圓角效果，例如 jquery ui。
border-radius的高級用法：創建復雜形狀
border-radius 不僅僅可以創建簡單的圓角，還可以通過組合不同的值來創建更復雜的形狀。
-
創建半圓： 將元素的寬度或高度設置為圓角半徑的兩倍，并將 border-radius 設置為 50%。
.semi-circle { width: 100px; height: 50px; background-color: #eee; border-radius: 50px 50px 0 0; /* 上半圓 */ } -
創建四分之一圓： 將元素的寬度和高度設置為相同的值，并將 border-radius 設置為元素的寬度或高度。
.quarter-circle { width: 50px; height: 50px; background-color: #eee; border-radius: 50px 0 0 0; /* 左上角四分之一圓 */ } -
創建不規則形狀： 通過調整每個角的圓角半徑，可以創建各種不規則形狀。這需要對 border-radius 的各個屬性進行精細的控制。
.irregular-shape { width: 100px; height: 100px; background-color: #eee; border-radius: 30px 70px 30px 70px; }
使用 border-radius 創建響應式圓角效果
在響應式設計中，我們可能需要根據屏幕尺寸調整圓角的大小。 這可以通過使用百分比值或 vw 和 vh 單位來實現。
-
使用百分比值： border-radius 的百分比值是相對于元素的寬度或高度計算的。 這使得圓角的大小可以隨著元素的大小自動調整。
.responsive-rounded-box { width: 50%; height: auto; background-color: #eee; border-radius: 10%; /* 圓角半徑是元素寬度的 10% */ } -
使用 vw 和 vh 單位： vw 和 vh 單位分別代表視口寬度和高度的百分比。 使用這些單位可以使圓角的大小相對于視口大小進行調整。
.responsive-rounded-box { width: 80vw; height: 40vh; background-color: #eee; border-radius: 2vw; /* 圓角半徑是視口寬度的 2% */ } -
使用媒體查詢： 通過媒體查詢，可以根據不同的屏幕尺寸應用不同的 border-radius 值。
.responsive-rounded-box { width: 100px; height: 50px; background-color: #eee; border-radius: 5px; @media (min-width: 768px) { border-radius: 10px; width: 200px; height: 100px; } }
通過靈活運用 border-radius 屬性，你可以輕松地為你的網頁添加各種圓角效果，并創建出更具吸引力和現代感的設計。記住，在實際項目中，要充分考慮瀏覽器的兼容性，并根據需要選擇合適的解決方案。
