其實之前i護理主頁的原型是這樣滴
然後由於時間問題+個人能力問題，所以最後是這樣滴
後來我發現京東的主頁好像也是這樣的
看來試着弄弄還是有點必要滴
效果圖：
源碼：
我們需要先重置一下瀏覽器的樣式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素
現在我們在body裏面進行粗略的構建結構
<body>
<div class="content">
<div class="info">這是背景啦</div>
</div>
<ul class="menu">
<li>我的訂單</li>
</ul>
</body>
接下來我們進行css樣式的書寫
.content {
height: 200px;
position: relative;
overflow: hidden;
}
使用僞元素::before
::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
.content::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: scale(2);
transform-origin: bottom center;
border-radius: 0 0 200px 200px;
background-color: #96D596;
}
::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，僞類元素的display是默認值inline，可以通過設置display:block來改變其顯示。
.content .info {
color: white;
position: relative;
z-index: 2;
}
全部源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 200px;
position: relative;
overflow: hidden;
}
.content::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: scale(2);
transform-origin: bottom center;
border-radius: 0 0 200px 200px;
background-color: #96D596;
}
.content .info {
color: white;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="content">
<div class="info">這是背景啦</div>
</div>
<ul class="menu">
<li>我的訂單</li>
</ul>
</body>
</html>
參考文章1：CSS3 box-sizing 屬性
參考文章2：::before和::after僞元素的用法