HTML+CSS怎样实现给边框添加角的效果
Admin 2022-11-30 群英技术资讯 626 次浏览
1、html
<div class="loginbody">
<div class="border_corner border_corner_left_top"></div>
<div class="border_corner border_corner_right_top"></div>
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<--other……………………-->
</div>
2、css
.loginbody{
border: 1px solid #21a7e1;
box-shadow: 5px 5px 10px 10px rgba(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: 4px solid #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;
}
到此,关于“HTML+CSS怎样实现给边框添加角的效果”的学习就结束了,希望能够解决大家的疑惑,另外大家动手实践也很重要,对大家加深理解和学习很有帮助。如果想要学习更多的相关知识,欢迎关注群英网络,小编每天都会给大家分享实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
css简写属性有什么用?简写属性是用于同时给多个属性赋值的属性,但是css简写属性有两点问题是需要注意的,就是简写属性会默默覆盖其他样式及简写值的顺序,接下来我们详细的了解看看。
这篇文章主要介绍了HTML5中外部浏览器唤起微信分享,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
css文本属性有哪些?css文本属性主要是针对文本的,能够设置文本颜色,文本对齐方式,文本修饰,文本行高等等。这篇文章总结了一些css文本属性,都是很有用的,感兴趣的朋友能够看一下。
这篇文章主要介绍了CSS -webkit-box-orient: vertical属性编译后丢失问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
通知栏是我们比较常见的组件之一,我们在很多网站都能看到通知栏,这主要用来显示网站的通知和公告。有很多通知公告栏是滚动效果显示,那么这是怎样实现的呢?下面分享几个用纯CSS代码实现通知公告滚动效果,感兴趣的朋友一起来学习下吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008