(前端)html与css，css10、_border边框_html-js-css

概述边框border 盒子占有的最外层的区域，本身是一个复合属性。 1、按样式类型分类分成:线的宽度、线的样式、线的颜色。宽度:border-width 宽度及颜色的演示代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti 边框border

盒子占有的最外层的区域，本身是一个复合属性。

1、按样式类型分类

分成:线的宽度、线的样式、线的颜色。

宽度:border-wIDth

宽度及颜色的演示代码↓

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8">    <Title>document</Title>    <style type="text/CSS">        div{            wIDth: 200px;            height: 200px;            background-color: skyblue;            border: 3px solID red;            /*1、宽度*/            /*二值法*/            border-wIDth: 4px 8px;            /*三值法*/            border-wIDth: 4px 8px 10px;            /*只更换左侧边框宽度*/            border-@R_502_6823@-wIDth: 6px;            /*2、颜色*/            border-color: red pink yellow green;        }    </style></head><body>    <div>        文字文字文字文字文字文字文字文字文字文字    </div></body></HTML>

VIEw Code

单值法:border-wIDth: 3px;表示上下左右都是3像素值。效果图↓

双值法:border-wIDth: 4px 8px;表示上下是4像素，左右是8像素。效果图↓

三值法:border-wIDth: 4px 8px 10px;表示上4像素，左右8像素，下10像素。效果图↓

单一方向只更换左侧边框: border-@R_502_6823@-wIDth: 6px;表示只有左侧边框是6像素。效果图↓

注意:书写顺序是边框-方向-宽度，不要将宽度和方向搞反。

颜色:border-color

属性值也有四个方向值，写法↓

border-color: red pink yellow green;

效果图↓

颜色的单值法、双值法、三值法的书写方法、更改单一方向及方向顺序与宽度一样，就不一一举例了。

线的样式:border-style

属性值分类:
solID(实线)
dashed(虚线)
dotted(点的虚线)
double(双线条)
groove(边框凹陷效果)
rIDge(边框凸出效果)
inset(内容区域凹陷效果)
outset(内容区域凸出效果)

代码↓

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8">    <Title>document</Title>    <style type="text/CSS">        p{            wIDth: 300px;            height: 80px;            background-color: skyblue;            border: 10px red;        }        .solID{            border-style: solID;        }        .dashed{            border-style: dashed;        }        .dotted{            border-style: dotted;        }        .double{            border-style: double;        }        .groove{            border-style: groove;        }        .rIDge{            border-style: rIDge;        }        .inset{            border-style: inset;        }        .outset{            border-style: outset;        }    </style></head><body>    <p class="solID">实线</p>    <p class="dashed">虚线</p>    <p class="dotted">点的虚线</p>    <p class="double">双线条</p>    <p class="groove">边框凹陷效果</p>    <p class="rIDge">边框的凸出效果</p>    <p class="inset">内容区域的凹陷效果</p>    <p class="outset">内容区域的凸出效果</p></body></HTML>

VIEw Code

效果图↓

也可以设置四个方向的样式代码↓

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8">    <Title>document</Title>    <style type="text/CSS">        div{            wIDth: 200px;            height: 200px;            background-color: skyblue;            border: 8px;            border-color: red pink yellow green;            border-style: solID dashed dotted double;        }    </style></head><body>    <div>        文字文字文字文字文字文字文字文字文字文字    </div></body></HTML>