溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css陰影的實現方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在css中，可以使用box-shadow屬性來設置陰影，語法“box-shadow:X軸 Y軸 大小 顏色 inset”；其中“inset”值是可選的，加上時該陰影表示內陰影，不加時該陰影表示外陰影。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
box-shadow為css陰影設置，其中分為外陰影和內陰影，一般默認為外陰影
外陰影的屬性為：X軸 Y軸 px color
屬性說明（順序依次對應）： 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色
<style>
.one{
margin: auto;
width: 200px;
height: 200px;
border: 1px solid #ffa;
box-shadow: 0 0 20px #000;
}
</style>
<body>
<p class="one">
</p>
</body>其結果為：
內陰影的屬性為：X軸 Y軸 px color inset
屬性說明（順序依次對應）： 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（大小） 陰影的顏色 inset
<style>
.one{
margin: auto;
width: 200px;
height: 200px;
border: 1px solid #ffa;
box-shadow: 0 0 20px #000 inset;
}
</style>
<body>
<p class="one">
</p>
</body>其結果為：
若配合css3動畫效果，會更加神奇
感謝各位的閱讀！關于“css陰影的實現方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
