同級css使用乙個樣式 純CSS樣式寫乙個內凹圓

2021-10-13 20:43:49 字數 759 閱讀 9424

廢話不多說,直接上效果圖!

這是html

單元管理

車位管理

商鋪管理

這是css

/* 內凹圓 */

.property_left_list

.list_one

.list_one:before

.list_one:after

.list_one:after,

.list_one:before

.list_one > div:before

.list_one > div:after

.list_one > div:after,

.list_one > div:before

完畢。有啥不懂就問!原理下班後更新。

一一一一一一一一一一一一一一一一一

我來更新原理了。

其實原理很簡單,就需要做內圓的元素外面套上兩層div。

這兩層div都要加上兩個偽類「after」「before」,然後兩個div分別按照上面的樣式進行設計,乙個是圓,乙個是正方形。

需要注意的是,正方形的大小必須是圓的半徑,原因你寫一次就清楚了。

最後記得將兩組偽類的位置進行調整。

tips:內層div的偽類組最好為正方形,外層偽類組為圓形

同級css使用乙個樣式 CSS 核心樣式

css核心樣式 粗細font weight作用 設定文字是否加粗顯示 屬性名 font weight,屬於font屬性的乙個單 屬性 屬性值有兩種方式 單詞型別 數字型別 單詞型別 數字型別100 900之間的整百數字 數字越大,文字顯示越粗 其中400等價於normal,700等價於bold 字型...

純CSS實現乙個氣泡框

實現原理 主要通過css的border color屬性,結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子,別忘記此盒子需加上position relative,不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...

使用純CSS3實現乙個日食動畫

日食現象是月亮擋在了地球和太陽之間,也就是月亮遮擋住了太陽。所以要構造日食,我們須要2個物件 乙個代表月亮,乙個代表太陽。我們把整個日食過程分解為3個階段 1.緩慢移入 2.短暫停留 3.緩慢移出。在此期間。會產生3個彼此關聯的動畫。首先是月亮的位置移動,我們通過改變月亮的x座標 left或righ...