溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3中陰影的表示方法有哪些

發(fā)布時間：2022-03-19 09:37:39 來源：億速云 閱讀：250 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css3中陰影的表示方法有哪些”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3中陰影的表示方法有哪些”文章能幫助大家解決問題。

css3中陰影分為2類：1、文本陰影，設(shè)置語法“text-shadow:水平位置 垂直位置 模糊距離 顏色;”；2、盒子陰影，設(shè)置語法“box-shadow:水平位置 垂直位置 模糊距離 spread 顏色 inset;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3中陰影分為兩種：文本陰影text-shadow和盒子陰影box-shadow，這兩個屬性可以在不添加背景圖片的情況下實現(xiàn)陰影的效果，在我們美化網(wǎng)頁時提供了很大的便利。那么這兩個屬性分別怎么用呢？

1. text-shadow

該屬性的語法規(guī)范是text-shadow: 1px 1px 1px #666;

在講css陰影屬性之前我們先來了解一下陰影有關(guān)的常識。

陰影的產(chǎn)生是光照在物體上，會在背光的地方產(chǎn)生陰影。

如下圖，是像右和向下產(chǎn)生的陰影：

css3中陰影的表示方法有哪些

下圖是向上和向左的陰影

css3中陰影的表示方法有哪些

下面再來看text-shadow屬性，屬性包括四個值，第一個值是陰影的水平偏移量，第二個值表示垂直偏移量，第三個值表示陰影發(fā)散范圍，第四個值表示陰影顏色。

一，默認向右和向下的陰影使用正值，向左和向上使用負值。

text-shadow: 1px 1px 1px #666;表示向右和向下偏移一個像素的陰影，text-shadow: -1px -1px 1px #666;表示向左和向上偏移的陰影。text-shadow: 0px 0px 1px #666;表示不偏移，這個時候四周會有同等的陰影，如下圖

css3中陰影的表示方法有哪些

二，多組屬性值可以用逗號隔開

text-shadow: 1px 1px 1px #666，-1px -1px 1px #666;表示四周都有偏移一個像素的陰影。

利用text-shadow屬性我們可以制作精美的凹凸文字效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #cccccc;
        }
        p{
            text-align: center;
            font-size: 60px;
            margin-top: 50px;
            font-weight: bold;
            color: #cccccc;
        }
        .tu{
            text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
        }
        .ao{
            text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
        }
    </style>
</head>
<body>
        <p>好好學(xué)習(xí)</p>
        <p>天天向上</p>
</body>
</html>

運行如下：

css3中陰影的表示方法有哪些

2. box-shadow

box-shadow和文字陰影的屬性很相似，一個是給文字加陰影，一個是給容器加陰影。

box-shadow的六個值，如下：

  • h-shadow 水平陰影的位置，值可以為負數(shù)（不可省略）

  • v-shadow 垂直陰影的位置，值可以為負數(shù)（不可省略）

  • blur 模糊的距離（可選）

  • spread 陰影的距離（可選）

  • color 陰影的顏色（可選）

  • inset 將外部陰影(outset)改成內(nèi)部陰影（可選）

none 默認值（box-shadow:none 可以取消邊框的陰影效果）

注釋：可向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 （2~4） 個長度值、1個可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。

實例：添加多個陰影樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3邊框陰影</title>
    <style>
    #box1{ 
                margin-top: 100px;
        margin-left:100px; 
        background-color: #fff;
        width: 100px;
        height: 100px;
             box-shadow:
        2px 2px 10px red,
        5px 5px 20px blue;
        }
        </style>
</head>
 <body>
    <div id="box1"></div>
</body>
</html>

運行效果
css3中陰影的表示方法有哪些

關(guān)于“css3中陰影的表示方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手