CSS可以用來實現各種各樣的效果,包括美食。比如我們來看看如何用CSS實現一份蛋糕。
/* HTML */ <div class="cake"> <!-- 省略詳情 --> </div> /* CSS */ .cake { width: 300px; height: 500px; background-color: #f5deb3; border-radius: 50% / 10%; position: relative; } /* 排版蛋糕層次 */ .cake:before, .cake:after { content: ""; display: block; width: 80%; height: 50px; background-color: #ffdab9; position: absolute; } .cake:before { top: 110px; left: 10%; border-radius: 50%; } .cake:after { top: 200px; right: 10%; border-radius: 50%; } /* 制作蛋糕標志 */ .cake::before { content: "Cake"; font-size: 30px; font-weight: bold; text-align: center; top: 50px; left: 0; right: 0; margin: 0 auto; color: #8b0000; }
首先,我們需要一個容器,這里我們用一個div元素,并定義好它的高寬、背景顏色和圓角半徑。然后我們用偽元素`:before`和`:after`來分別添加兩個蛋糕的層次。它們的寬度都是80%,高度在50px左右,位置分別在頂部和右側。我們還可以通過給`border-radius`屬性的第一個數字來調整層次的形狀。
現在我們需要往蛋糕上面添加一個“Cake”標志,我們可以再用一個`:before`偽元素來實現。在這里,我們將它的`content`屬性設為“Cake”,并設置字體、字號、字重、文本對齊以及顏色。通過`top: 50px; left: 0; right: 0; margin: 0 auto;`這幾個屬性來將標志居中顯示。
這樣,一份蛋糕就完成了。它看起來很類似于一個半球形,并且有兩層淡黃色的蛋糕層次。我們還通過添加一個“Cake”標志來讓人一目了然。這是一個簡單的例子,但它展示了CSS可以用來實現美食效果的例子。
上一篇html公共css
下一篇mysql5.0升級