如何 CSS 五角星
CSS 是用于定義網頁樣式的語言,我們可以使用 CSS 來創建各種形狀和樣式,其中包括五角星。下面是一個簡單的 CSS 五角星示例:
```css
box-sizing: border-box;
.五角星 {
position: relative;
width: 100px;
height: 100px;
.五角星:before,
.五角星:after {
content: "";
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background-color: #fff;
transform: rotate(-45deg);
.五角星:after {
left: 0;
transform: rotate(45deg);
上述代碼定義了一個五角星,使用 CSS 的 `:before` 和 `:after` 偽元素來創建。這些偽元素具有相同的寬度和高度,但是 `border-radius` 屬性設置為 50px 50px 0 0,以創建一個圓形。背景顏色設置為白色,使五角星看起來更明顯。
我們也可以使用 CSS 的 `box-shadow` 屬性來創建更復雜的五角星效果。例如:
```css
.五角星 {
position: relative;
width: 100px;
height: 100px;
.五角星:before,
.五角星:after {
content: "";
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 80px;
border-radius: 50px 50px 0 0;
background-color: #fff;
box-shadow: inset -20px 0 20px #ccc;
.五角星:after {
left: 0;
transform: rotate(45deg);
上述代碼使用 CSS 的 `box-shadow` 屬性來創建一個在五角星中心點下方的兩個小五角星,并將 `inset` 屬性設置為 20px,以使五角星看起來更逼真。
通過使用 CSS 我們可以輕松地創建各種形狀的五角星,并且可以輕松地將它們應用于不同的頁面。