边框border的特殊应用

18 篇文章 0 订阅

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


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

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

  1. border-left1px 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元素或者更多的,然后设置边框颜色,产生三种颜色的边框或者更过。就先写到这吧,继续努力。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值