成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

box-shadow

canger / 3040人閱讀

摘要：中的屬性被用來(lái)添加陰影投影方式軸偏移量軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色下述概念引用自陰影類型此參數(shù)是一個(gè)可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影如果取其唯一值就是將外陰影變成內(nèi)陰影，也就是說設(shè)置陰影類型為時(shí)，其投影就

CSS3中的box-shadow屬性被用來(lái)添加陰影
box-shadow:inset x-offset y-offset blur-radius spread-radius color
投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色

下述概念引用自：http://www.w3cplus.com/conten...
陰影類型：此參數(shù)是一個(gè)可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影，也就是說設(shè)置陰影類型為“inset”時(shí)，其投影就是內(nèi)陰影；
X-offset:是指陰影水平偏移量其值可以是正負(fù)值可以取正負(fù)值，如果值為正值，則陰影在對(duì)象的右邊，反之其值為負(fù)值時(shí)，陰影在對(duì)象的左邊；
Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，如果為正值，陰影在對(duì)象的底部，反之其值為負(fù)值時(shí)，陰影在對(duì)象的頂部；
陰影模糊半徑：此參數(shù)是可選，，但其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值是，則縮小

陰影顏色：此參數(shù)可選，如果不設(shè)定任何顏色時(shí)，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無(wú)色，也就是透明，建議不要省略此參數(shù)。

demo1:

div{
        width:300px;
        height:200px;
        background-color:red;
        box-shadow: 18px 10px #888888;
    }

demo2:

div{
        width:300px;
        height:200px;
        background-color:red;
        box-shadow: inset 18px 10px #888888;
        }

demo3:

div{
        width:300px;
        height:200px;
        background-color:red;
        box-shadow: 18px 10px 10px #888888;
        }


demo4:

div{

    width:300px;
    height:200px;
    background-color:red;
    box-shadow: 18px 10px 10px 15px #888888;
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116576.html

相關(guān)文章

  • box-shadow常用技巧總結(jié)

    摘要：隨著和的普及這一特殊效果使用越來(lái)越普遍基本語(yǔ)法對(duì)象選擇器投影方式軸偏移量軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色下面是九種常用的的代碼與效果圖屬性測(cè)試左邊陰影右邊陰影頂部陰影底邊陰影元素使用了效果圖 box-shadow 隨著HTML5和CSS3的普及這一特殊效果使用越來(lái)越普遍 基本語(yǔ)法 {box-shadow:[inset] x-offset y-offset blur-radius...

    李世贊 評(píng)論0 收藏0

  • box-shadow常用技巧總結(jié)

    摘要：隨著和的普及這一特殊效果使用越來(lái)越普遍基本語(yǔ)法對(duì)象選擇器投影方式軸偏移量軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色下面是九種常用的的代碼與效果圖屬性測(cè)試左邊陰影右邊陰影頂部陰影底邊陰影元素使用了效果圖 box-shadow 隨著HTML5和CSS3的普及這一特殊效果使用越來(lái)越普遍 基本語(yǔ)法 {box-shadow:[inset] x-offset y-offset blur-radius...

    Yangyang 評(píng)論0 收藏0

  • 【前端Talkking】CSS系列-css3之box-shadow介紹

    摘要：基本上就是將單側(cè)投影中的技巧運(yùn)用兩次，以如下所示在瀏覽器中的效果如下模擬邊框使用屬性可以模擬的效果，以如下所示在瀏覽器中的效果如下我們可以看到利用屬性模擬了的效果，但是與不同的是，使用創(chuàng)建的邊框效果并不會(huì)影響元素的尺寸。 1.寫在前面 在CSS3中，可以使用box-shadow屬性來(lái)創(chuàng)建陰影效果來(lái)給二維平面增加深度效果，這個(gè)屬性在前端開發(fā)中使用的非常多，例如segmentfault的首...

    jackzou 評(píng)論0 收藏0

  • CSS魔法堂：Box-Shadow 沒那么簡(jiǎn)單啦:)

    摘要：陰影距離原位置的垂直位移，正數(shù)表示向下移動(dòng)，負(fù)數(shù)表示向上移動(dòng)。實(shí)現(xiàn)原理純個(gè)人理解創(chuàng)建一個(gè)與元素尺寸一致的陰影盒子將陰影盒子定位到于元素重合，并位于元素之上水平和垂直各畫兩條線，分別跟元素重合共條分別記為根據(jù)和移動(dòng)。 前言 說起box-shadow那第一個(gè)想法當(dāng)然就是用來(lái)實(shí)現(xiàn)陰影，其實(shí)它還能用于實(shí)現(xiàn)其他好玩的效果的，本篇就打算說說box-shadow的那些事。 二話不說看效果 showI...

    Galence 評(píng)論0 收藏0

  • 前端 CSS : 2# 純 CSS 實(shí)現(xiàn)多彩的 Buttons(box-shadow)

    摘要：介紹介紹中國(guó)色感謝大佬的前端每日實(shí)戰(zhàn)對(duì)我的啟蒙已經(jīng)有了的練習(xí)但這種練習(xí)并非刻意針對(duì)自己薄弱的問題而且對(duì)于一些概念還處于哦啊哈我懂了其實(shí)并不懂這種自欺欺人的狀態(tài)所以也確定了一下我要總結(jié)區(qū)別于大佬總體的練習(xí)多篇文章會(huì)強(qiáng)化某一個(gè)屬性第一篇 介紹 box-shadow 介紹中國(guó)色 感謝 comehope 大佬的 前端每日實(shí)戰(zhàn) 對(duì)我的啟蒙 已經(jīng)有了 100+ 的練習(xí), 但這種練習(xí)并非刻意針對(duì)...

    QiuyueZhong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<