CSS3之陰影效果box-shadow與text-shadow

歡迎訪問我的博客

本篇相關代碼演示地址

本篇,我們要講的是CSS3中經常被使用來開發頁面模糊陰影效果的box-shadow屬性和text-shadow屬性。

在前端開發過程中,我們常常會看見這種效果:

box-shadow陰影效果圖

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shadow</title>
        <style>
            .box {
                height: 100px;
                width: 200px;
                border: 1px ridge silver;
            }
            .shadow1 {
                box-shadow: 4px 4px 6px 1px gray;
            }
        </style>
    </head>
    <body>
        <div class="box shadow1"></div>
    </body>
    </html>

這種陰影效果就是使用CSS3box-shadow屬性實現。

box-shadow

box-shadow屬性向框元素添加一個或多個陰影效果。

  • 語法:

    box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

  • 屬性

屬性 說明
inset 可選,將默認的外陰影設置為內陰影。
x-offset 必需,水平方向陰影偏移量,可為負值。
y-offset 必需,垂直方向上陰影偏移量,可為負值。
blur 可選 ,陰影模糊半徑,不可為負值。
spread 可選,陰影延展半徑,可為負值。
color 可選,陰影顏色

陰影偏移量

box-shadow陰影偏移量可正可負,為正值時則向右或下偏移,如下:

  • 正水平偏移量陰影
正水平偏移量陰影
  • 負水平偏移量陰影
負水平偏移量陰影
  • 正垂直偏移量陰影
正垂直偏移量陰影
  • 負垂直偏移量陰影
負垂直偏移量陰影

模糊半徑

  • 正模糊半徑陰影
正模糊半徑陰影
  • box-shadow不支持負模糊半徑

延展半徑

  • 正延展半徑

    正延展半徑向外延展陰影半徑

正延展半徑陰影
  • 負延展半徑

    負延展半徑向內收縮陰影半徑

負延展半徑陰影1
負延展半徑陰影2

text-shadow

text-shadow 屬性向文本設置陰影。

文本陰影
  • 語法

    text-shadow: x-offset y-offset blur color;

  • 屬性

屬性 說明
x-offset 必需,水平方向陰影偏移量,可為負值。
y-offset 必需,垂直方向上陰影偏移量,可為負值。
blur 可選 ,陰影模糊半徑,不可為負值。
color 可選,陰影顏色
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容