成都网站建设设计

将想法与焦点和您一起共享

css如何设置边框线样式

这篇文章将为大家详细讲解有关css如何设置边框线样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销,专业领域包括网站制作、成都网站设计、电商网站制作开发、微信小程序、微信营销、系统平台开发,与其他网站设计及系统开发公司不同,我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供全方位的互联网品牌整合方案!

css的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

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

示例:




	
		
		
			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
			}
		
	

	
		点状边框
虚线边框
实线边框
双线边框
3D 凹槽边框
3D 垄状边框 3D inset 边框 3D outset 边框

效果图:

css如何设置边框线样式

方法2:使用border-image属性

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

示例:

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

css如何设置边框线样式

代码示例:




    
    
    
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    


    

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

css如何设置边框线样式

关于“css如何设置边框线样式”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站栏目:css如何设置边框线样式
分享链接:http://chengdu.cdxwcx.cn/article/pjdeso.html