1.使用伪类,让border边框显示一半
<!doctype html><html> <head> <meta chart="utf-8"> <title>使用伪类,在元素前或后插入内容</title> <style> div { position: relative; width: 300px; height: 50px; background-color: #bbb; padding: 4px } hp pc div:before { content: ""; position: absolute; 英文自我介绍 left: 0; top: -2px; width: 50%;和义 height: 2px; background-color: red } </style> <div>请看这个div的“上边框”是只有一半的</div> </body></html>
2.使用绝对定位,增加边框盒子
<!doctype html><html> <head> <meta chart="utf-8"> <title>使用position定位,边框显示一半</title> <style> 军衔划分 #holder { height: 50px; width: 300px; position: relative; margin: 10px; background-color: #eee; } #mask { position: absolute; top: -1px; left: 1px; width: 50%; height: 1px; background-color: orchid; } </style> <div id="holder"> 请看这个div的“上边框”是只有一半的 <div id="mask"></div> </div> </body> </html>
到此这篇关于css border边框一半或者部分可见的实现代码的文章就介绍到这了,更多相关css border边框内容请搜索www.887薪酬福利管理551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!
本文发布于:2023-04-07 15:54:12,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/74ebfc0da521ca548285c367445aae2c.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:CSS border边框一半或者部分可见的实现代码.doc
本文 PDF 下载地址:CSS border边框一半或者部分可见的实现代码.pdf
留言与评论(共有 0 条评论) |