css实现仿四周内阴影盒子

最新推荐文章于 2024-01-04 16:24:35 发布

Pink kiki

最新推荐文章于 2024-01-04 16:24:35 发布

阅读量326

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_46607117/article/details/129450645

版权

有时图片需要内阴影效果但是用box-shadow会有模糊的感觉，下面是鼠标按下图片会有平滑清晰的内阴影效果

html部分

<ul>
        <li>
            <a href="#"><img src="img/x1.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="img/x2.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="img/x3.jpg" alt=""></a>
        </li>
    </ul>

css部分：

body {
            background-color: #333333;
        }

        ul {
            margin: 0 auto;
            padding: 0;
            list-style-type: none;
            width: 1010px;
            overflow: hidden;

        }

        ul li {
            float: left;
            margin: 0 10px;
        }

        ul li a {
            position: relative;
            display: block;
        }
         /* a标签有一个before，用它盖在a上面 */
        ul li a::before {
            content: '';
            /* 用来容纳块的计算公式 */
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        ul li:hover a::before {
            border: 10px solid rgba(255, 255, 255, .5);
            border-radius: 5px;
        }

        ul li img {
            display: block;
            border-radius: 5px;
        }