<!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="referrer" content="no-referrer" /> <!-- <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">--> <style> body { margin-left: 500px; background: #5d9ab2 url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png") no-repeat right top fixed; } .center_div { border: 1px solid gray; margin-left: -500px; margin-right:100px; width: 80%; background-color: #d0f0f6; /*background-color: lightskyblue;*/ text-align: left; padding: 8px; } /*一些段落和标题格式*/ p{ text-indent: 50px; /* 缩进文本 */ border-style: ; } h2, h3, h4, h5{ text-indent: 20px; /* 缩进文本 */ } /*1.设置四个边框的宽度*/ p.one{ border-style: solid; border-width: 5px; } p.two{ border-style: solid; border-width: medium; } p.three{ border-style: dotted; border-width: 2px; } p.four{ border-style: dotted; border-width: thick; } p.five{ border-style: double; border-width: 15px; } p.six{ border-style: double; border-width: thick; } /*2.设置上、下、左、右边框的宽度*/ p.top{ border-style: solid; border-top-width: 15px; } p.bottom{ border-style: solid; border-bottom-width: 15px; } p.left{ border-style: solid; border-left-width: 15px; } p.right{ border-style: solid; border-right-width: 15px; } /*3.设置四个边框的样式*/ p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} /*4.设置上、下、左、右边框的样式*/ p.top-style {border-top-style: dotted;} p.bottom-style {border-bottom-style: dotted;} p.left-style {border-left-style: dotted;} p.right-style {border-right-style: dotted;} /*5.设置四个边框的颜色*/ p.color1 { border-style: solid; border-color: #0000ff; } p.color2 { border-style: solid; border-color: #ff0000 #0000ff; } p.color3 { border-style: solid; border-color: #ff0000 #00ff00 #0000ff; } p.color4 { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); } /*6.设置上、下、左、右边框的颜色*/ p.top-color{ border-style: solid; border-top-color: #ff0000; } p.bottom-color{ border-style: solid; border-bottom-color: #ff0000; } p.left-color{ border-style: solid; border-left-color: #ff0000; } p.right-color{ border-style: solid; border-right-color: #ff0000; } /*7.一个声明中的所有边框属性（简写版）*/ p.shorthand-property{ border: 5px solid red; } /*8.为元素添加圆角边*/ p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; } /*9.每边设置不同的边框*/ p.diff-one { border-style: dotted solid dashed double; } p.diff-two { border-style: dotted solid dashed; } p.diff-three { border-style: dotted solid; } p.diff-four { border-style: dotted; } /*10.一个声明中的所有顶部、底部、左右的边框属性（简写版）*/ p.border-top-shorthand-property{ border-style: solid; border-top: thick double #ff0000; } p.border-bottom-shorthand-property{ border-style: solid; border-bottom: thick double #ff0000; } p.border-left-shorthand-property{ border-style: solid; border-left: thick double #ff0000; } p.border-right-shorthand-property{ border-style: solid; border-right: thick double #ff0000; } </style> </head> <div class="center_div"> <h1>边框边距</h1> <h4 style="color:pink"> /**/</h4> <h2>一.边框</h2> <h3>1.设置四个边框的宽度</h3> <p>给p添加 border-style: 样式; border-width: 宽度;</p> <p>如：p.four { border-style: dotted（点缀）; border-width: thick（厚的）; }</p> <h5> border-width(边框宽度属性)</h5> <p>此属性指定四个边框的宽度：</p> <p class="one">Some text.（ border-style: solid; border-width: 5px;）</p> <p class="two">Some text.（ border-style: solid; border-width: medium;）</p> <p class="three">Some text.（ border-style: dotted; border-width: 2px;）</p> <p class="four">Some text.（ border-style: dotted; border-width: thick;）</p> <p class="five">Some text.（ border-style: double; border-width: 15px;）</p> <p class="six">Some text.（ border-style: double; border-width: thick;）</p> <p><b>注意</b>：如果单独使用“border-width”属性将不起作用。始终指定“border-style”属性来首先设置边框。 </p> <h3>2.设置上、下、左、右边框的宽度</h3> <p>给p添加 border-style: 样式; border-top-width: 宽度;</p> <p>如：p.top { border-style: solid; border-top-width: 15px; }</p> <p class="top">Some text.（ border-style: solid; border-top-width: 15px;）</p> <p class="bottom">Some text.（ border-style: solid; border-bottom-width: 15px;）</p> <p class="left">Some text.（ border-style: solid; border-left-width: 15px;）</p> <p class="right">Some text.（ border-style: solid; border-right-width: 15px;）</p> <p><b>注意</b>：如果单独使用“border-top-width”、“border-bottom-width”、“border-left-width”、“border-right-width”属性将不起作用。首先使用“border-style”属性设置边框。 </p> <h3>3.设置四个边框的样式</h3> <p>先设置了p的边框。也可不设置。为p { border-style: solid; }再给p添加 border-style: 样式; </p> <p>如：p.dotted {border-style: dotted;} p.dashed {border-style: dashed;}</p> <h5>border-style（边框样式）属性</h5> <p>此属性指定要显示的边框类型：</p> <p>/* 下面括号 意思随便翻译的 */</p> <p class="dotted">A dotted border（虚线边框）.</p> <p class="dashed">A dashed border（虚线边框）.</p> <p class="solid">A solid border（厚边框）.</p> <p class="double">A double border（双边框）.</p> <p class="groove">A groove border（凹槽边框）.</p> <p class="ridge">A ridge border（山脊边框）.</p> <p class="inset">An inset border（内嵌边框）.</p> <p class="outset">An outset border（初始边框）.</p> <p class="none">No border（无边框）.</p> <p class="hidden">A hidden border（隐藏边框）.</p> <p class="mix">A mixed border（混合边框）.</p> <h3>4.设置上、下、左、右边框的样式</h3> <p> 给p的其他类 添加 border-top-style: 样式;</p> <p>如：p.top { border-style: solid; border-top-width: 15px; }</p> <p class="top-style">Some text.（border-top-style: dotted;）</p> <p class="bottom-style">Some text.（border-bottom-style: dotted;）</p> <p class="left-style">Some text.（border-left-style: dotted;）</p> <p class="right-style">Some text.（border-right-style: dotted;）</p> <h3>5.设置四个边框的颜色</h3> <p> 给p添加 border-style: 样式; border-color: 颜色;</p> <p>如： p.color1 { border-style: solid; border-color: #0000ff; } </p> <p class="color1">One-colored border!(单色边框！)</p> <p class="color2">Two-colored border!(两色边框！)</p> <p class="color3">Three-colored border!(三色边框！)</p> <p class="color4">Four-colored border!(四色边框！)</p> <p><b>注意</b>：如果单独使用“border-color”属性将不起作用。首先使用“border-style”属性设置边框。</p> <h3>6.设置上、下、左、右边框的颜色</h3> <p> 给p的其他类 添加 border-bottom-color: 颜色;</p> <p>如：p.top { border-style: solid; border-bottom-color: #ff0000; }</p> <p class="top-color">Some text.（border-top-color: #ff0000;）</p> <p class="bottom-color">Some text.（border-bottom-color: #ff0000;）</p> <p class="left-color">Some text.（border-left-color: #ff0000;）</p> <p class="right-color">Some text.（border-right-color: #ff0000;）</p> <h3>7.一个声明中的所有边框属性（简写版）</h3> <p> border-width、border-style、border-color的简写属性</p> <p>如： p.shorthand-property{ border: 5px solid red; }</p> <p class="shorthand-property">此属性是边框宽度、边框样式和边框颜色的速记属性(border: 5px solid red;)。</p> <h3>8.为元素添加圆角边</h3> <p>设置border 的属性值比如：5px solid red; 然后在设置border-radius ： 半径长度 px </p> <p>如：p.round3 { border: 2px solid red; border-radius: 12px; }</p> <h5>border-radius（边界半径属性 ）属性</h5> <p>此属性用于为元素添加圆角边框：</p> <p class="normal">Normal border(正常边框 不设置border-radius)</p> <p class="round1">Round border(圆形边框 border-radius: 5px;)</p> <p class="round2">Rounder border(圆角边框 border-radius: 8px;)</p> <p class="round3">Roundest border(最圆边框 border-radius: 12px;)</p> <h3>9.每边设置不同的边框</h3> <p>设置border-style 的属性值，设置4个则分给四个边，3个则分给上下平分左右，2个则上下分一个左右分一个，1个则上下左右一个属性值 </p> <p>如：p.diff-one { border-style: dotted solid dashed double; } </p> <p class="diff-one">设置4个边框属性值（dotted solid dashed double;）</p> <p class="diff-two">设置3个边框属性值（dotted solid dashed;）</p> <p class="diff-three">设置2个边框属性值（dotted solid;）</p> <p class="diff-four">设置1个边框属性值（dotted;）</p> <h3>10.一个声明中的所有顶部、底部、左右的边框属性（简写版）</h3> <p> border-top的简写属性</p> <p>如： p.border-top-shorthand-property{ border-style: solid; border-top: thick double #ff0000; }</p> <p class="border-top-shorthand-property">此属性是所有顶部边框属性的速记属性( border-top: thick double #ff0000;)。需先写border-style</p> <p class="border-bottom-shorthand-property">此属性是所有顶部边框属性的速记属性( border-button: thick double #ff0000;)。需先写border-style</p> <p class="border-left-shorthand-property">此属性是所有顶部边框属性的速记属性( border-left: thick double #ff0000;)。需先写border-style</p> <p class="border-right-shorthand-property">此属性是所有顶部边框属性的速记属性( border-right: thick double #ff0000;)。需先写border-style</p> </div> </body> </html>