首頁 > 文章 > web前端 > 輕鬆掌握css3陰影、倒影、漸層小技巧

輕鬆掌握css3陰影、倒影、漸層小技巧

高洛峰原創: 2017-03-04 10:11:031751瀏覽

下面小編就為大家帶來一篇5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

做：輕鬆掌握css3陰影、倒影、漸層小技巧

二、先建立兩個文字不做處理運行如圖 輕鬆掌握css3陰影、倒影、漸層小技巧

#三、給第一個p字體加上陰影

#text-shadow: 5px 5px 10px red;

text-shadow: 5px 5px 5px red,5px -5px 10px yellow;

box-shadow:用法與text -shadow類似，只不過它是對盒子，例如p

text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...前两个值可以是负数,第三个不能使负数,可以是0(无效果)

輕鬆掌握css3陰影、倒影、漸層小技巧

#四、為第一個p加上倒影

-webkit-box-reflect:below 輕鬆掌握css3陰影、倒影、漸層小技巧 10px ;

方向(above上below下左右left right) 間距。

注意：倒影不佔文件流的空間,層級高於文件流#倒影是針對標籤(寬高)進行的五、加上漸層#background-image: -webkit- linear-gradient(left, red

, yellow

50 輕鬆掌握css3陰影、倒影、漸層小技巧 %

);

####第一個百分數是從0%到這個百分數全是這種顏色,最後一個百分比是從這個百分數到100%全是這種顏色,中間如果不同百分數就是漸變,一樣就是分界線。 #####################六、所有程式碼： #########

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3</title>
        <style type="text/css">
            p{    
                font-size: 30px;    
                width: 300px;    
                height: 100px;    
                background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
                /*渐变*/    
                color: blue;    
                -webkit-box-reflect:below 10px ;    
                /*倒影*/    
                text-shadow: 5px 5px 10px red;    
                /*阴影*/    
            }    
            span{    
                background: aqua;    
            }    

</style>
    </head>
    <body>
        <p>
            <p>我会翻跟斗！！哈哈哈</p>
        </p>
        <span>
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
        </span>
    </body>
</html>

#########以上這篇5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。 ######更多輕鬆掌握css3陰影、倒影、漸層小技巧相關文章請關注PHP中文網！ ###

陳述：

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

上一篇：CSS製作三角形和按鈕的簡單實例詳解下一篇：CSS製作三角形和按鈕的簡單實例詳解

看更多