首頁 > 文章 > web前端 > css如何實現陰影效果

css如何實現陰影效果

青灯夜游原創: 2021-04-13 18:37:2323471瀏覽

方法：1、使用text-shadow屬性，語法「text-shadow: 水平陰影垂直陰影模糊距離顏色;」；2、使用box-shadow屬性，語法「box-shadow: 水平陰影垂直陰影模糊距離陰影大小顏色inset;」。

css如何實現陰影效果

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

方法1：使用text-shadow屬性

text-shadow屬性用於設定帶陰影的文字；可設定陰影的像素長度、寬度和模糊的距離以及陰影的顏色。

語法：

text-shadow: h-shadow v-shadow blur color;

屬性值：

#h-shadow：設定水平陰影的位置，允許負值。
v-shadow：設定垂直陰影的位置，允許負值。
blur：設定模糊的距離。
color：設定陰影的顏色。

範例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

css如何實現陰影效果

#方法2：使用box-shadow屬性

box-shadow屬性可以將陰影套用到文字框，可設定中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

屬性值：

#h-shadow：設定水平陰影的位置，允許負值；必要值，不可省略。
v-shadow：設定垂直陰影的位置，允許負值；必要值，不可省略。
blur：設定模糊距離；可選值，可省略。
spread：設定陰影的大小；可選值，可省略。
color：設定陰影的顏色；可選值，可省略。
inset：設定從外層的陰影（開始時）改變陰影內側陰影；可選值，可省略。

範例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title>
        <style>
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
            }
            .demo img{
                 box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 /*考虑浏览器兼容性*/
                 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img  src="img/1.jpg"/ alt="css如何實現陰影效果" >
        </div>
    </body>
</html>

css如何實現陰影效果

（學習影片分享：css影片教學）

以上是css如何實現陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css如何設定表格間距下一篇：css如何設定表格間距

看更多