边框是经常用到的属性,但是有时候却很让人抓狂,比如这种情况
边框带有阴影,hover之后白色的方块被后面的遮挡一部分,这就比较恼火了,
阴影边框本来应该是admin有边框是
使得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元素或者更多的,然后设置边框颜色,产生三种颜色的边框或者更过。就先写到这吧,继续努力。