• 技术文章 >web前端 >css教程

    css怎么设置边框为虚线样式

    青灯夜游青灯夜游2021-04-18 13:14:10原创7452

    在css中,可以使用border-style属性来设置边框为虚线样式,只需要给元素添加“border-style:dashed;”样式即可。border-style属性用于设置元素边框的样式,当值为“dashed”时,可定义虚线边框样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css设置边框虚线样式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			p.dashed {
    				border-style: dashed
    			}
    			
    			p.solid {
    				border-style: solid
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<p class="dashed">这是虚线边框样式!</p>
    
    		<p class="solid">这是实线边框样式!</p>
    
    	</body>
    
    </html>

    效果图:

    1.png

    border-style 属性用于设置元素边框的样式;只有当这个值不是 none 时边框才可能出现。

    属性值:

    描述
    none定义无边框。
    hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
    dotted定义点状边框。在大多数浏览器中呈现为实线。
    dashed定义虚线。在大多数浏览器中呈现为实线。
    solid定义实线。
    double定义双线。双线的宽度等于 border-width 的值。
    groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset定义 3D inset 边框。其效果取决于 border-color 的值。
    outset定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit规定应该从父元素继承边框样式。

    (学习视频分享:css视频教程

    以上就是css怎么设置边框为虚线样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 边框
    上一篇:css如何超出显示滚动条 下一篇:css实现元素隐藏和显示的属性有哪些
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• css如何设置边框颜色• css元素如何隐藏• CSS如何实现各种形状• css如何让图片居中• css如何设置不透明
    1/1

    PHP中文网