这篇文章主要介绍设置css边框线的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
站在用户的角度思考问题,与客户深入沟通,找到秦淮网站设计与秦淮网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网络空间、企业邮箱。业务覆盖秦淮地区。
CSS中的边框线可以通过border-style属性来设置,它可以设置成点状,虚线,实线,3D 凹槽边框、垄状边框、3D inset 边框等等
边框样式:
border-style:
该属性是用于设置元素所有边框的样式,或者是单独地为各边设置边框样式
边框样式具有以下几种:
none:不定义边框,即无边框
dotted :边框样式为点状边框
dashed :边框样式为虚线
solid:边框样式为实线,在大多数浏览器中呈现为实线。
double:边框样式为双线。双线的宽度等于 border-width 的值。
groove:边框样式为 3D 凹槽边框,它的效果取决于 border-color 的值。
ridge :边框样式为垄状边框,它的效果取决于 border-color 的值。
inset:边框样式为3D inset 边框,它的效果取决于 border-color 的值。
outset :边框样式为 3D outset 边框,它的效果取决于 border-color 的值。
inherit:边框样式为应该从父元素继承边框样式。
案例:
设置边框的上边为点状,下边为虚线,左右两边为实线
div{ width:100px; height: 100px; border-style: dotted solid dashed solid; border-color: pink; }
效果图如下:
设置边框为3D 凹槽和垄状边框
<style type="text/css"> .box1{ width:100px; height:30px; border:5px groove pink; margin-bottom: 5px; } .box2{ width:100px; height:30px; border:5px ridge pink; } </style> </head> <body> <div class="box1">3D 凹槽边框</div> <div class="box2">垄状边框</div> </body>
效果图
以上是设置css边框线的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
本文题目:设置css边框线的方法
网页路径:https://www.cdcxhl.com/article16/ispjgg.html
成都网站建设公司_创新互联,为您提供App开发、建站公司、网页设计公司、网站排名、App设计、Google
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联