css3陰影的詳解

這次帶給大家css3陰影的詳解，使用css3陰影的注意事項有哪些，下面就是實戰案例，一起來看一下。

box-shadow
參數：
h-shadow(必要):水平陰影的位置，允許負值
v-shadow(必需):垂直陰影的位置，允許負值
blur(可選):模糊距離
spread(可選):陰影的尺寸
color(可選):陰影的顏色
inset(可選):將外部陰影(outset)改為內部陰影
eg:

<style>
   .effect{
       position: relative;
       width: 800px;
       height: 200px;
       background-color: #fff;
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3)
       ,0px 0px 40px rgba(0,0,0,0.1) inset;  //水平和垂直阴影的值都设置为0，阴影会从中间发散至四周。
   }
    .effect:after,.effect:before{
        position: absolute;
        content: &#39;&#39;;
        background: #fff;
        top:50%;
        bottom:0;
        left: 10px;
        right: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
        z-index: -999;
        border-radius: 100px/10px;
   }</style><div class="effect"></div>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Require.js詳解

#用JS實作排序演算法

Javascript的單例模式

JS的正規表示式如何使用

以上是css3陰影的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！