CSS中半圓形的設(shè)置可以通過以下兩種方式進(jìn)行:
1. 使用偽元素
border-radius: 50%; background-color: #007bff; width: 100px; height: 50px; position: relative; } ::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background-color: #fff; border-radius: 0 0 50% 50%; } ::after { content: ''; display: block; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; background-color: #007bff; border-radius: 50% 50% 0 0; }
以上代碼中使用了偽元素before和after來實(shí)現(xiàn)半圓形的效果。
2. 使用border-radius屬性
background-color: #007bff; width: 100px; height: 50px; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-bottom: none; }
以上代碼中使用了border-radius屬性來設(shè)置四個(gè)角的圓角為50% 50%,從而實(shí)現(xiàn)半圓形的效果。