CSS3 内阴影的应用

    内阴影应用效果展示：

1.png

运用到的具体属性：

box-shadow：0px 1px 0px rgb（255 255 255/10%）,inset 0px 1px 1px rgb（0 0 0/70%）

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

引用菜鸟的图标

布局：

 

<ul class="ll"> 
        <li>
            <a href="" class="in"></a>
        </li>
        <li>
            <a href="" class="in"></a>
        </li>
        <li>
            <a href="" class="in"></a>
        </li>
        <li>
            <a href="" class="in"></a>
        </li>
     
    </ul>

样式部分;

<style>
    *{
        margin: 0;
        padding: 0;
    }
    a.in{
        color: brown;
        font-size: 36px;
        background: url(./c01.png) no-repeat center;
    }
    .ll{
        margin: 200px auto;
        width: 450px;
        height: 200px;
        background-color: #333;

    }
    .ll li a{
        height: 53px;
        display: block;
        overflow: hidden;
        /* inset 内阴影 */
        box-shadow: 0px 1px 0px rgb(255 255 255 /10%),inset 0px 1px 1px rgb(0 0 0 /70%);
        border-radius: 50%;
        margin: 0 5px;
    }
    .ll li{
        width: 25%;
        float: left;
    }
    a{
        text-decoration: none;
    }
    li{
        list-style: none;
    }
</style>

版权声明：本文为lolhuxiaotian原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。