您的位置：首页 > 其它

边框border的特殊应用

2015-10-14 09:02 302 查看

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

边框带有阴影，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>

显示的效果为

使用这种方法你甚至可以将两个span元素或者更多的，然后设置边框颜色，产生三种颜色的边框或者更过。就先写到这吧，继续努力。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航