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

    css怎么设置边框线样式

    青灯夜游青灯夜游2021-04-29 17:02:03原创458

    方法:1、使用border-style属性,可通过不同的属性值来设置不同的边框线样式,例“dotted”点状,“solid”实线,“double”双线;2、使用border-image属性,为边框添加不同的背景图片来设置不同的边框线样式。

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

    方法1:使用border-style属性

    border-style 属性用于设置元素边框的样式

    属性值:

    描述
    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规定应该从父元素继承边框样式。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			div {
    				margin: 10px 0;
    			}
    			
    			div.dotted {
    				border-style: dotted
    			}
    			
    			div.dashed {
    				border-style: dashed
    			}
    			
    			div.solid {
    				border-style: solid
    			}
    			
    			div.double {
    				border-style: double
    			}
    			
    			div.groove {
    				border-style: groove
    			}
    			
    			div.ridge {
    				border-style: ridge
    			}
    			
    			div.inset {
    				border-style: inset
    			}
    			
    			div.outset {
    				border-style: outset
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="dotted">点状边框</div>
    
    		<div class="dashed">虚线边框</div>
    
    		<div class="solid">实线边框</div>
    
    		<div class="double">双线边框</div>
    
    		<div class="groove">3D 凹槽边框</div>
    
    		<div class="ridge">3D 垄状边框</div>
    
    		<div class="inset">3D inset 边框</div>
    
    		<div class="outset">3D outset 边框</div>
    	</body>
    
    </html>

    效果图:

    1.png

    方法2:使用border-image属性

    border-image属性可以为边框添加背景图片

    示例:

    使用图所示的这张90px×90px的图片作为边框的背景图片。

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div
            {
                width:210px;
                height:150px;
                border:30px solid gray;
                border-image:url(img/border.png) 30 repeat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    浏览器预览效果如下图所示。

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

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 边框线
    上一篇:css如何禁止选中页面内容 下一篇:css如何设置元素高度自适应
    线上培训班

    相关文章推荐

    • jsp怎么引入css• css如何设置行间距• css id与class的区别是什么• css设置边框的属性有哪些• 如何让css样式失效

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网