W3School-CSS 边框(border)实例

CSS 边框(border)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓(Outline) 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01所有边框属性在一个声明之中
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>01所有边框属性在一个声明之中</title>
        <style type="text/css">
            body{
                    background-color: #FF985E;
                }
                p{
                    border: medium double rgb(94,234,255);
                }
        </style>
    </head>

    <body>
        <p>编点啥呢,真费脑筋啊!</p>
    </body>

</html>

846157-20151224164810781-1114602202.png


02设置四边框样式
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>02设置四边框样式</title>
        <style type="text/css">
            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;}
        </style>
    </head>
    <body>
        <p class="dotted">我是dotted border</p>
        <p class="dashed">我是dashed border</p>
        <p class="solid">我是solid border</p>
        <p class="double">我是double border</p>
        <p class="groove">我是groove border</p>
        <p class="ridge">我是ridge border</p>
        <p class="inset">我是inset border</p>
        <p class="outset">我是outset border</p>
    </body>
</html>

846157-20151224171350515-2073742220.png


03设置每一边的不同边框
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>03设置每一边的不同边框</title>
        <style type="text/css">
            p.soliddouble{border-style:solid double;}
            p.doublesolid{border-style:double solid;}
            p.groovedouble{border-style:groove double;}
            p.three{border-style:solid double groove;}
        </style>
    </head>
    <body>
        <p class="soliddouble">两个参数:上下左右</p>
        <p class="doublesolid">两个参数:上下左右</p>
        <p class="groovedouble">两个参数:上下左右</p>
        <p class="three">三个参数:上左右下</p>
    </body>
</html>

846157-20151225094031234-537151708.png


04所有边框宽度属性在一个声明之中
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>04所有边框宽度属性在一个声明之中</title>
        <style type="text/css">
            body {
                background-color: #FFEFBF;
            }
            
            p.one {
                border-style: solid;
                border-width: 5px;
            }
            
            p.two {
                border-style: solid;
                border-width: thick;
            }
            
            p.three {
                border-style: solid;
                border-width: 5px 10px;
            }
            
            p.four {
                border-style: solid;
                border-width: 5px 10px 1px;
            }
            
            p.five {
                border-style: solid;
                border-width: 5px 10px 1px medium;
            }
        </style>
    </head>

    <body>
        <p class="one">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
        <p class="two">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
        <p class="three">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
        <p class="four">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
        <p class="five">"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框</p>
    </body>

</html>

846157-20151225095952062-825797563.png


05设置四个边框的颜色
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>05设置四个边框的颜色</title>
        <style type="text/css">
            body {
                background-color: #B2C5FF;
            }
            
            p.one {
                border-style: solid;
                border-color: #C3DB51;
            }
            
            p.two {
                border-style: solid;
                border-color: #C3DB51 #D863F2;
            }
            
            p.three {
                border-style: solid;
                border-color: #C3DB51 #D863F2 #E0E0F8;
            }
            
            p.four {
                border-style: solid;
                border-color: #C3DB51 #D863F2 #E0E0F8 #7787C5;
            }
        </style>
    </head>

    <body>
        <p class="one">One-colored border!</p>

        <p class="two">Two-colored border!</p>

        <p class="three">Three-colored border!</p>

        <p class="four">Four-colored border!</p>

    </body>

</html>

846157-20151225102417718-848855555.png


06所有下边框属性在一个声明中
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>06所有下边框属性在一个声明中</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-bottom: thick dotted #FF0000;
            }
        </style>
    </head>

    <body>
        <p>对对对这个人就是就是那个叫什么隆力奇!</p>
    </body>

</html>

846157-20151225104044234-1685621212.png


07设置下边框的颜色
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>07设置下边框的颜色</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-bottom-color: #FF0000;
            }
        </style>
    </head>

    <body>
        <p>对对对就设置一个瞎编筐</p>
    </body>

</html>

846157-20151225104717421-1663740436.png


08设置下边框的样式
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>08设置下边框的样式</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
            }
            
            p.none {
                border-bottom-style: none;
            }
            
            p.dotted {
                border-bottom-style: dotted;
            }
            
            p.dashed {
                border-bottom-style: dashed;
            }
            
            p.solid {
                border-bottom-style: solid;
            }
            
            p.double {
                border-bottom-style: double;
            }
            
            p.groove {
                border-bottom-style: groove;
            }
            
            p.ridge {
                border-bottom-style: ridge;
            }
            
            p.inset {
                border-bottom-style: inset;
            }
            
            p.outset {
                border-bottom-style: outset;
            }
        </style>
    </head>

    <body>
        <p class="none">No bottom border.</p>
        <p class="dotted">A dotted bottom border.</p>
        <p class="dashed">A dashed bottom border.</p>
        <p class="solid">A solid bottom border.</p>
        <p class="double">A double bottom border.</p>
        <p class="groove">A groove bottom border.</p>
        <p class="ridge">A ridge bottom border.</p>
        <p class="inset">An inset bottom border.</p>
        <p class="outset">An outset bottom border.</p>
    </body>

</html>

846157-20151225105225890-1519435623.png


09设置下边框的宽度
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>09设置下边框的宽度</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p.one {
                border-style: solid;
                border-bottom-width: 15px;
            }
            
            p.two {
                border-style: solid;
                border-bottom-width: thin;
            }
        </style>
    </head>

    <body>
        <p class="one">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
        <p class="two">"border-bottom-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    </body>

</html>

846157-20151225105831718-1350300362.png


10所有左边框属性在一个声明之中

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>10所有左边框属性在一个声明之中</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-left: thick double #FF0000;
            }
        </style>
    </head>

    <body>
        <p>我又来了哈哈?</p>
    </body>

</html>

846157-20151225110444624-242411948.png


11设置左边框的颜色
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>11设置左边框的颜色</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-left-color: #FF0000;
            }
        </style>
    </head>

    <body>
        <p>我又来了哈哈?</p>
    </body>

846157-20151225110823031-1946251739.png


12设置左边框的样式
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>12设置左边框的样式</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
            }
            
            p.none {
                border-left-style: none;
            }
            
            p.dotted {
                border-left-style: dotted;
            }
            
            p.dashed {
                border-left-style: dashed;
            }
            
            p.solid {
                border-left-style: solid;
            }
            
            p.double {
                border-left-style: double;
            }
            
            p.groove {
                border-left-style: groove;
            }
            
            p.ridge {
                border-left-style: ridge;
            }
            
            p.inset {
                border-left-style: inset;
            }
            
            p.outset {
                border-left-style: outset;
            }
        </style>
    </head>

    <body>
        <p class="none">No left border.</p>
        <p class="dotted">A dotted left border.</p>
        <p class="dashed">A dashed left border.</p>
        <p class="solid">A solid left border.</p>
        <p class="double">A double left border.</p>
        <p class="groove">A groove left border.</p>
        <p class="ridge">A ridge left border.</p>
        <p class="inset">An inset left border.</p>
        <p class="outset">An outset left border.</p>
    </body>

</html>

846157-20151225111308046-226121174.png


13设置左边框的宽度
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>13设置左边框的宽度</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p.one {
                border-style: solid;
                border-left-width: 15px;
            }
            
            p.two {
                border-style: solid;
                border-left-width: thin;
            }
        </style>
    </head>

    <body>
        <p class="one">"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
        <p class="two">"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    </body>

</html>

846157-20151225111754031-282022307.png


14所有右边框属性在一个声明之中
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>14所有右边框属性在一个声明之中</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-right: thick double #FF0000;
            }
        </style>
    </head>

    <body>
        <p>我再次来了哈哈?</p>
    </body>

</html>

846157-20151225112209390-183904336.png


15设置右边框的颜色

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>15设置右边框的颜色</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-right-color: #FF0000;
            }
        </style>
    </head>

    <body>
        <p>我再次来了哈哈?</p>
    </body>

</html>

846157-20151225112446546-1275522421.png


16设置右边框的样式
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>16设置右边框的样式</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p.dotted {
                border-right-style: dotted;
            }
            
            p.dashed {
                border-right-style: dashed;
            }
            
            p.solid {
                border-right-style: solid;
            }
            
            p.double {
                border-right-style: double;
            }
            
            p.groove {
                border-right-style: groove;
            }
            
            p.ridge {
                border-right-style: ridge;
            }
            
            p.inset {
                border-right-style: inset;
            }
            
            p.outset {
                border-right-style: outset;
            }
        </style>
    </head>

    <body>
        <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>

    </body>

</html>

846157-20151225112849515-1217758472.png


17设置右边框的宽度
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>17设置右边框的宽度</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p.one {
                border-style: solid;
                border-right-width: 15px;
            }
            
            p.two {
                border-style: solid;
                border-right-width: thin;
            }
        </style>
    </head>

    <body>
        <p class="one">"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
        <p class="two">"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    </body>

</html>

846157-20151225113332734-1869318708.png


18所有上边框属性在一个声明之中
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>18所有上边框属性在一个声明之中</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-top: thick double #FF0000;
            }
        </style>
    </head>

    <body>
        <p>大冬天被?憋醒!</p>
    </body>

</html>

846157-20151225113805671-2098879551.png


19设置上边框的颜色
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>19设置上边框的颜色</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
                border-top-color: #FF0000;
            }
        </style>
    </head>

    <body>
        <p>大冬天被?憋醒!</p>
    </body>

</html>

846157-20151225114153218-1857383822.png


20设置上边框的样式
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>20设置上边框的样式</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p {
                border-style: solid;
            }
            
            p.none {
                border-top-style: none;
            }
            
            p.dotted {
                border-top-style: dotted;
            }
            
            p.dashed {
                border-top-style: dashed;
            }
            
            p.solid {
                border-top-style: solid;
            }
            
            p.double {
                border-top-style: double;
            }
            
            p.groove {
                border-top-style: groove;
            }
            
            p.ridge {
                border-top-style: ridge
            }
            
            p.inset {
                border-top-style: inset;
            }
            
            p.outset {
                border-top-style: outset;
            }
        </style>
    </head>

    <body>
        <p class="none">No top border.</p>
        <p class="dotted">A dotted top border.</p>
        <p class="dashed">A dashed top border.</p>
        <p class="solid">A solid top border.</p>
        <p class="double">A double top border.</p>
        <p class="groove">A groove top border.</p>
        <p class="ridge">A ridge top border.</p>
        <p class="inset">An inset top border.</p>
        <p class="outset">An outset top border.</p>

    </body>

</html>

846157-20151225114626734-656579771.png


21设置上边框的宽度

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>21设置上边框的宽度</title>
        <style type="text/css">
            body {
                background-color: #DAFECB;
            }
            
            p.one{
                border-style: solid;
                border-top-width: 30px;
            }
            
            p.two{
                border-style: solid;
                border-top-width: thin;
            }
        </style>
    </head>

    <body>
        <p class="one">"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
        <p class="two">"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    </body>

</html>

846157-20151225115546046-33953922.png


CSS边框实例总结

846157-20151225115812577-377206189.png


转载于:https://www.cnblogs.com/hoey/p/5073309.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值