精品裸体舞一区二区三区,蜜桃91视频,а 中文在线天堂精品,欧美性A√,五月激情五月婷婷,久久影音先锋,亚洲AV图片,日韩在线a√

英文?|?https://www.geeksforgeeks.org/how-to-create-floating-box-effect-using-html-and-css/?ref=rp

浮動框效果是自定義框陰影技術(shù)的經(jīng)典示例。在這種技術(shù)中，我們無需使用CSS提供的box-shadow屬性即可創(chuàng)建逼真的陰影效果。

實現(xiàn)方法：在選擇器之后使用模糊功能創(chuàng)建陰影。

HTML：在本文中，我們創(chuàng)建了主體的基本結(jié)構(gòu)。在這里，我們使用了一個包含Class屬性的

標(biāo)記來在屏幕上渲染浮動框。

 <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport"          content="width=device-width,                     initial-scale=1.0">     <title>Floating Boxtitle> head> <body>     <h1>GeeksForGeeksh1>     <div class="geeks">div> body> html>

CSS代碼：在本節(jié)中，我們使用了一些CSS屬性來設(shè)計浮動框并在其上添加一些樣式。

以下步驟描述了CSS屬性：

第1步：首先，我們完成了一些基本的樣式設(shè)置，例如設(shè)置背景，創(chuàng)建外框并將所有內(nèi)容對齊頁面中心。
步驟2：現(xiàn)在，使用After選擇器在我們創(chuàng)建的框下方創(chuàng)建一條細(xì)線，然后使用blur函數(shù)為其賦予陰影效果。

提示：請嘗試使用較深的顏色和較低的值來實現(xiàn)陰影的模糊功能。如果沒有，您可能最終會使陰影透明。

完整代碼：它是以上兩個代碼的組合。

 <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content=         "width=device-width,initial-scale=1.0">    <title>Floating Boxtitle>     <style>         body {             background: green;         }         h1 {             display:flex;             justify-content: center;             color: white;             font-size: 40px;                                 }
        .geeks {             width:400px;             height:250px;             background: white;             position: absolute;             top:16%;             left:35%;             border-radius: 20px;         }
        .geeks::after {             content: "";             position: absolute;             bottom: -30px;             background: rgb(43, 42, 42);             width: 90%;             height:4px;             left:3%;             border-radius:50%;             filter: blur(3px);         } style> head>
<body>     <h1>GeeksForGeeksh1>     <div class="geeks">div> body>
html>

最終效果如下：

點擊放大

【開發(fā)小技巧】026—如何使用HTML和CSS創(chuàng)建浮動框陰影效果？