溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何用css制作陰影效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
1.首先我們在新建的 html 文件中，添加兩個div的盒子，代碼如下：
<html> <head> <meta charset="utf-8"> <title>css制作陰影效果</title> </head> <body> <div > </div> <div > </div> </body></html>2.當我們完成創建和添加的時候，我們在第一個盒子中加入 img 標簽之后，我們可以挑選自己喜歡的一張圖片加入在項目中的 img 文件夾當中，在來到代碼塊的src="(img文件夾中的圖片)",在第二個div中加入
標簽，代碼及效果如下：
<html> <head> <meta charset="utf-8"> <title>css制作陰影效果</title> </head> <body> <div > <img src="./img/shadow.png" /> </div> <div > <p>css制作陰影效果</p> </div> </body></html>3.那么接下來我們開始來為實習陰影效果做下一步驟，在第一個和第二個的div中添加class和id的類屬性，并且分別命名為shadow-img和shadow-txt，在繼續添加link標簽用來連接css做準備。代碼如下：
html> <head> <meta charset="utf-8"> <title>css制作陰影效果</title> <link href="css/css制作陰影效果.css" rel="stylesheet" /> </head> <body> <div class="shadow-img" > <img src="./img/shadow.png" /> </div> <div id="shadow-txt"> <p>css制作陰影效果</p> </div> </body></html>4.完成之后，我們開始編寫 css 效果代碼，根據圖片的寬高我們設置第一個 div 的寬高這樣才可以顯示出來陰影效果，并且在第二個 div 中設置文字大小使得更加明顯。代碼如下：
.shadow-img{ /*需要先定義圖片元素的寬高*/ width: 330px;height: 326px;/* 在 box-shadow 中的值得意思分別代表；陰影靠左距離、陰影靠上距離、陰影模糊度 陰影顏色*/ box-shadow: 10px 10px 50px dimgrey; }#shadow-txt{ margin-top: 50px; font-size: 50px;/* 在 text-shadow 中的值得意思分別代表；陰影字體靠左距離、陰影字體靠上距離、陰影字體模糊度 陰影字體顏色*/ text-shadow: 10px 5px 15px slategrey; }5.在css代碼中我們用到了 box-shadow和txt-shadow，這兩個屬性都是用來設置陰影的，當中的值在文本中都有注釋。
“如何用css制作陰影效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
