您正在使用IPV4(3.92.28.52)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!      
虚位以待
2021年 冬至节 20
2021年 圣诞节 24
2022年 元 旦 31
2022年 春 节 62
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    css 边框添加四个角的实现代码
    内容摘要: 1、htmldivclass='loginbody'divclass='border_cornerborder_corner_left_top'/divdivclass='border_cornerborder_corner_right_top'/divdivclass='border_cornerborder_corner_left_bottom'/div......
    1、html

    <divclass="loginbody">

    <divclass="border_cornerborder_corner_left_top"></div>

    <divclass="border_cornerborder_corner_right_top"></div>

    <divclass="border_cornerborder_corner_left_bottom"></div>

    <divclass="border_cornerborder_corner_right_bottom"></div>

    <--other……………………-->

    </div>

    2、css

    .loginbody{

    border:1pxsolid#21a7e1;

    box-shadow:5px5px10px10pxrgba(24,68,124,0.4);

    padding-top:20px;

    border-radius:6px;

    position:relative;

    }

    /*四个角框*/

    .border_corner{

    z-index:2500;

    position:absolute;

    width:19px;

    height:19px;

    background:rgba(0,0,0,0);

    border:4pxsolid#1fa5f1;

    }

    .border_corner_left_top{

    top:-2px;

    left:-2px;

    border-right:none;

    border-bottom:none;

    border-top-left-radius:6px;

    }

    .border_corner_right_top{

    top:-2px;

    right:-2px;

    border-left:none;

    border-bottom:none;

    border-top-right-radius:6px;

    }

    .border_corner_left_bottom{

    bottom:-2px;

    left:-2px;

    border-right:none;

    border-top:none;

    border-bottom-left-radius:6px;

    }

    .border_corner_right_bottom{

    bottom:-2px;

    right:-2px;

    border-left:none;

    border-top:none;

    border-bottom-right-radius:6px;

    }

    版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:JS实现简单计数器 下一篇:原生JS实现可拖拽登录框
    发布日期:2021/10/16
    手机扫二维码直达本页
    发布时间:19:53:13
    点击:213
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021