不規則邊緣
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="banner"">
</div>
<div class="section">
<div class="container">
<div class="item">
<h2>1</h2>
<p>鐵路試驗看法反覆用品四個事業一支神話宜蘭行情前來僅供，留下面議外資色彩事故經營許可證發貼動畫萬元推坑王，很熱一隻衣服一股執行文章一旦連接共享軍事，情形經歷在這三個亞洲，你沒有畢業歐洲寫出來走向加速不要，激情成員斗內工程師指出僅僅身後殺手但我標誌某個你們的。</p>
</div>
<div class="item">
<h2>2</h2>
<p>資源聲明出台，得到國有，些什麼並沒有內心印度認為無數形式不限，儘快聯想分析工廠玄幻，住房還在變得責任家園簡歷，負責支撐，國外站在所有人幽默特性現金記錄居住現有文明證實銷售完美，指標樂隊鈴聲下載，見過逐步果然線路法律責任，來了所有人大大，我是印度性質，嚴格。</p>
</div>
</div>
</div>
|
CSS
文字內容區塊要注意的地方是記得加上 position: relative;、z-index: 2;，讓 container 內的內容顯示在最上層(畫面上)。
不規則的泡泡邊框一樣用 :after 來處理，先做出一個圓形區塊，使用 transform: translateX(-30%) translateY(-50%); 移動到邊緣。接下來其他的泡泡部分則用 box-shadow 來產生。透過位移效果，造成不規則狀。另外可以做黑圈圈(顏色加深)來增強視覺效果。
box-shadow: X軸位移| Y軸位移| 模糊值|擴散值|大小|顏色
最後用 :before 加上 z-index: 1; 來遮蔽可能凸出的圓形下方。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| // css reset
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Noto Sans TC', sans-serif;
}
body {
background-color: #edece1;
}
.banner {
height: 700px;
background: url('../images/yann-maignan-rRiAzFkJPMo-unsplash.jpg') center
top / cover;
}
.section {
position: relative;
.container {
width: 1200px;
margin: auto;
// 留白
padding: 50px 0;
display: flex;
// 讓 container 內的內容顯示在最上層(畫面上)
position: relative;
z-index: 2;
.item {
width: 570px;
margin: 0px 15px;
font-family: 'Noto Sans TC', sans-serif;
h2 {
margin-bottom: 1.3em;
}
p {
line-height: 1.7;
margin-bottom: 1.6em;
}
}
}
// 泡泡邊框
&::after {
content: '';
display: block;
position: absolute;
width: 200px;
height: 200px;
background-color: #edece1;
// 定位
top: 0;
left: 50%;
// 區塊往上、左移動
transform: translateX(-30%) translateY(-50%);
// 圓形
border-radius: 50%;
// 用陰影複製出圓形 水平位置 垂直位置 模糊量 大小 顏色
box-shadow: 160px -10px 0px -30px #edece1, 300px -10px 0px -10px #edece1,
450px -30px 0px 30px #edece1, 600px 0px 0px 0px #edece1,
-160px -20px 0px -30px #edece1, -280px 0px 0px -40px #edece1,
-350px 0px 0px -20px #edece1, -520px 0px 0px 10px #edece1,
-690px 0px 0px -20px #edece1,
// 黑圈圈
160px -30px 0px -30px rgba(0, 0, 0, 0.5);
}
// 遮蔽下方突出的圓形
&::before {
content: '';
position: absolute;
width: 100%;
height: 100px;
background-color: #edece1;
z-index: 1;
top: 0;
left: 0;
}
}
|
參考：
https://www.youtube.com/watch?v=7SFuF9XE24s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=23
https://hsuchihting.github.io/css/20200731/3999112309/
