CSS半圓形是一種獨特的形狀,它在網頁設計中常常使用。下面是一個簡單的示例:
.border { width: 100px; height: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 50px 50px; background-color: blue; }
以上代碼將會生成一個寬度為100像素,高度為50像素,藍色背景的半圓形。它的左上角和右上角都有圓角,而底部則為直線。其中,border-top-left-radius
和border-top-right-radius
屬性規定了圓角的大小和形狀。
下面是一個更為復雜的樣式,它呈現出兩個半圓形組成的形狀:
.box { width: 100px; height: 100px; background-color: pink; position: relative; } .box::before { content: ""; display: block; width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; border-top-left-radius: 50px 50px; border-top-right-radius: 50px 50px; } .box::after { content: ""; display: block; width: 50px; height: 50px; background-color: blue; position: absolute; bottom: 0; border-bottom-left-radius: 50px 50px; border-bottom-right-radius: 50px 50px; }
以上代碼將會生成一個寬度和高度都為100像素,粉色背景的正方形,其中上半部分和下半部分都為半圓形。注意,這里使用了::before
和::after
偽元素來生成兩個半圓形。
以上兩個樣例只是 CSS 半圓形的簡單示范,更多的樣式和功能需要讀者自行拓展。同時應該注意的是,不同瀏覽器對 CSS 半圓形的支持可能存在細微差別,需要謹慎測試和調整。