您正在使用 IPV4 [174.129.140.206] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
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
点  击:12
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....