0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>Muffin’s Round Frame, Part 2</h2>
5
</ul><h2>Muffin’s Round Frame, Part 2</h2>
6
<p>Now that the graphic frame is ready, we will round off the portrait of Muffin, then hide the unneeded part of the background by cropping background-clip and removing the auxiliary outer frame.</p>
6
<p>Now that the graphic frame is ready, we will round off the portrait of Muffin, then hide the unneeded part of the background by cropping background-clip and removing the auxiliary outer frame.</p>
7
<p>Therefore, our round portrait in a round frame is ready!</p>
7
<p>Therefore, our round portrait in a round frame is ready!</p>
8
<h2>Comments</h2>
8
<h2>Comments</h2>
9
<ul><li>index.html</li>
9
<ul><li>index.html</li>
10
<li>style.css</li>
10
<li>style.css</li>
11
</ul><p>HTML</p>
11
</ul><p>HTML</p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <title>Muffin’s Round Frame, Part 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="portrait"></div> </body> </html></p>
12
<p><!DOCTYPE html> <html lang="en"> <head> <title>Muffin’s Round Frame, Part 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="portrait"></div> </body> </html></p>
13
<p>CSS</p>
13
<p>CSS</p>
14
<p>.portrait { margin: 50px auto; width: 300px; height: 300px; outline: 5px solid white; border: 50px solid rgba(0, 0, 0, 0.4); border-image-source: url("img/leafs-frame.png"); border-image-slice: 180 fill; background: url("img/muffin-3.jpg") center no-repeat rgba(255, 255, 255, 0.4); background-size: cover; }</p>
14
<p>.portrait { margin: 50px auto; width: 300px; height: 300px; outline: 5px solid white; border: 50px solid rgba(0, 0, 0, 0.4); border-image-source: url("img/leafs-frame.png"); border-image-slice: 180 fill; background: url("img/muffin-3.jpg") center no-repeat rgba(255, 255, 255, 0.4); background-size: cover; }</p>
15
<p>Thanks! We’ll fix everything at once!</p>
15
<p>Thanks! We’ll fix everything at once!</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>The code has changed, click “Refresh” or turn autorun on.</p>
17
<p>You’ve gone to a different page</p>
17
<p>You’ve gone to a different page</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>Click inside the mini-browser to shift the focus onto this window.</p>
19
<p>100%</p>
19
<p>100%</p>
20
<ol><li>For the portrait, set 50% rounding for the corners,</li>
20
<ol><li>For the portrait, set 50% rounding for the corners,</li>
21
<li>crop the background of the content-box, and</li>
21
<li>crop the background of the content-box, and</li>
22
<li>remove the outline outer frame.</li>
22
<li>remove the outline outer frame.</li>
23
</ol>
23
</ol>