10CSS边框边距_边框部分210912

<!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>
posted @ 2021-09-13 08:19 learnacode 阅读(65) 评论(0) 编辑收藏举报
刷新页面返回顶部
learnacode

10CSS边框边距_边框部分210912

公告
