css如何设置边框线样式

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

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

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强>方法1:使用边框样式属性

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

属性值:

值描述没有定义无边框.hidden与“none"相同。不过应用于表时除外,对于表,用隐藏于解决边框冲突. dot定义点状边框。在大多数浏览器中呈现为实线.dashed定义虚线。在大多数浏览器中呈现为实线.solid定义实线.double定义双线。双线的宽度等于边框宽度的值.groove定义3 d凹槽边框。其效果取决于边框颜色的值.ridge定义3 d垄状边框。其效果取决于边框颜色的值.inset定义3 d插图边框。其效果取决于边框颜色的值.outset定义3 d开始边框。其效果取决于边框颜色的值.inherit规定应该从父元素继承边框样式。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style 类型=拔谋?css"比; 　　div  { 　　保证金:10 px  0; 　　} 　　 　　div.dotted  { 　　边框样式:虚线 　　} 　　 　　div.dashed  { 　　边框样式:破灭 　　} 　　 　　div.solid  { 　　边框样式:固体 　　} 　　 　　div.double  { 　　边框样式:双 　　} 　　 　　div.groove  { 　　边框样式:槽 　　} 　　 　　div.ridge  { 　　边框样式:脊 　　} 　　 　　div.inset  { 　　边框样式:插图 　　} 　　 　　div.outset  { 　　边框样式:开始 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div 类=癲otted"祝辞点状边框& lt;/div> 　　 　　& lt; div 类=癲ashed"祝辞虚线边框& lt;/div> 　　 　　& lt; div 类=皊olid"祝辞实线边框& lt;/div> 　　 　　& lt; div 类=癲ouble"祝辞双线边框& lt;/div> 　　 　　& lt; div 类=癵roove"祝辞3 d 凹槽边框& lt;/div> 　　 　　& lt; div 类=皉idge"祝辞3 d 垄状边框& lt;/div> 　　 　　& lt; div 类=癷nset"祝辞3 d  inset 边框& lt;/div> 　　 　　& lt; div 类=皁utset"祝辞3 d  outset 边框& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

<强>方法2:使用border-image属性

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

示例:

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

代码示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=皍tf-8",/比; 　　,,,& lt; title> & lt;/title> 　　,,,& lt; style 类型=拔谋?css"比; 　　,,,,,,div 　　,,,,,,,{ 　　,,,,,,,,,,,宽度:210 px; 　　,,,,,,,,,,,身高:150 px; 　　,,,,,,,,,,,边界:30 px  solid 灰色; 　　,,,,,,,,,,,border-image: url (img/border.png), 30,重复; 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　,,,& lt; div> & lt;/div> 　　& lt;/body> 　　& lt;/html>

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

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

css如何设置边框线样式