小半圓是一種常用的CSS樣式,通常用于美化元素的樣式,比如導航欄或按鈕等。小半圓的創建方式有多種,下面介紹其中兩種常見的方法。
方法一:使用border-radius屬性
border-radius: 0 0 50% 50% / 100% 100% 0 0;
其中,第一個斜線前的四個值表示左上、右上、右下、左下四個圓角的半徑大小,第二個斜線后的四個值表示對應四個角的橢圓圓心的點坐標,缺省值都是50%。
方法二:使用偽元素:before和:after
content: ''; display: block; position: absolute; width: 50%; height: 100%; border-radius: 0 50% 50% 0;
這種方法需要在原本的元素外部包裹一個父元素,并設置其相對定位(position: relative),然后通過添加偽元素:before和:after來實現,這兩個偽元素與父元素互相重疊,形成半圓形狀。
以上是兩種常規的小半圓樣式創建方法,根據具體需求還有其他更加復雜的實現方式。
下一篇jquery 浮現