zoukankan      html  css  js  c++  java
  • css中多边框实现的方式

    只有你做不到的需求,没有想不到的需求。

    我们来看一下一个元素多边框的需求。对于边框我们想到的是使用border,没有错,就是这样子。但是这个属性只能实现一个边框(目前为止是这样子的)。

    我们先看看一个边框:

    代码如下:

    用传统的方式我们无法实现多边框,只能另辟蹊径。

    第一种,使用多个元素进行定位重叠(这个不演示)

    第二种,使用伪元素进行定位重叠(这个不演示)

    第三种,使用box-shadow实现

    看看代码:

     看看实现:

    利用的是box-shadow的扩张半径实现。

    当然这个也是有缺点的:

    1.只能实现实线边框

    2.边框不能实线元素某些交互行为。

    看代码:

     只有在元素区域内,才会是的背景颜色变成黑色,移动到所谓的边框上面是没有任何的效果。

    第四种,outline(描边实现)。

    看代码:

     效果如下:

    想比box-shadow,outline可以实现虚线边框:

     

    但是还是不能实现元素的某些交互,比如hover。不能随着元素的border-radius变化而变化,而第三种是可以的(自己可以去体会一下)。

    用第四种我们可以实现一个简单的缝边效果:

     效果:

    还是有点味道。

  • 相关阅读:
    Hyper-V自定义专用网络网段
    mongodb导入,导出实例
    kafka介绍二 快速开始
    常用代理IP服务商
    kafka介绍一
    链接汇总
    心态,决定你的人生
    hibernate入门(三)hibernate的三种状态解析
    hibernate入门(二)一级缓存和三种状态解析
    css动画之颤动的动画
  • 原文地址:https://www.cnblogs.com/jsydb/p/12590238.html
Copyright © 2011-2022 走看看