边框border的特殊应用

最新推荐文章于 2025-05-17 15:48:03 发布

原创最新推荐文章于 2025-05-17 15:48:03 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

34 篇文章

订阅专栏

HTML

18 篇文章

订阅专栏

本文探讨了在网页设计中遇到的一个常见问题：带有阴影的边框在hover状态时被遮挡的情况。通过创建空的内联元素并设置左右边框，能够有效解决这一问题，同时保持边框阴影的可见性。

边框是经常用到的属性，但是有时候却很让人抓狂，比如这种情况

边框带有阴影，hover之后白色的方块被后面的遮挡一部分，这就比较恼火了，

阴影边框本来应该是admin有边框是

border-left: 1px solid #0080DD;退出那部分有边框1px solid #0065B0，然后产生一个阴影效果，但是这样做

使得hover时边框会被覆盖，需要些很多css样式来显示边框阴影效果，所以有没有好一点的替代方法呢。

答案是肯定的，方法一，嫌麻烦地话直接将阴影边框截图下来，当作背景图片使用，当然这种方法太low 了，方法二，将一个

空的inline元素左右边框分别设置，然后设置高度或字体大小都可以，说的可能不是太清楚来看下代码吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .border {
        border-left: 1px solid red;
        border-right: 1px solid blue;
        font-size: 13px;
    }
    </style>
</head>

<body>
    <span class="border"></span>
</body>

</html>

显示的效果为