「网易官方」极客战记(codecombat)攻略-网页开发2-边境巡警-border-patrol

2021-02-19 10:20

阅读:475

标签:有一个   选择   href   请求   极客   das   http   eve   range   

技术图片
(点击图片进入关卡)

为元素添加边框,能够帮助与其他元素分隔开来。

简介

border 用于在元素周围放置一个漂亮的边框。

div {
    border: 3px double purple;
}

默认代码

 

    /* 记住选择一个类,使用一个“.” */
    .content {
        /* 若要添加默认边框,请添加边框样式 */
        /* 边框风格可以是:实心,点缀,… */
        /* ...插图,双重,凹槽,田埂,开端 */
        border-style:double;
    }
    /* 记住,选择标签仅仅是标签名称: */
    h2 {
        /* 边框也具有宽度和颜色属性。 */
        border-style:dashed;
        border-width:2px;
        border-color:orange;
    }
    p {
        /* 还有一个速记属性 "border" */
        /* 简单地包括大小、样式和宽度! */
        border:green dotted 5px;
    }
    img {
        /* 在这里添加任何类型的边框: */

 

    }
    ol {
        /* 在这里添加任何类型的边框: */

 

    }
    li {
        /* 在这里添加任何类型的边框: */

 

    }
    

标题在这里!

    
    "http://direct.codecombat.com/file/db/thang.type/
    545bacb41e649a4495f887da/portrait.png"/>
    

        内容在这里!
    
            
  1. 我是一个有序的列表。
  2.         
  3. 请给我一个边框!
  4.         
  5. 我请求你。
  6. 概览

    border

    border 属性由3个子属性组成,分别是 border-style 、 border-width 和 border-color 。这三个属性将控制边框的形状、大小和颜色。

    border 会围绕在元素四周,将其内容与外部元素分开。

    img {
        border-style: dotted;
        border-color: green;
        border-width: 2px;
    }
    div {
        border: 1px solid black;
    }

    边境巡警 解法

     

        /* 记住选择一个类,使用一个“.” */
        .content {
            /* 若要添加默认边框,请添加边框样式 */
            /* 边框风格可以是:实心,点缀,… */
            /* ...插图,双重,凹槽,田埂,开端 */
            border-style:double;
        }
        /* 记住,选择标签仅仅是标签名称: */
        h2 {
            /* 边框也具有宽度和颜色属性。 */
            border-style:dashed;
            border-width:2px;
            border-color:orange;
        }
        p {
            /* 还有一个速记属性 "border" */
            /* 简单地包括大小、样式和宽度! */
            border:green dotted 5px;
        }
        img {
            /* 在这里添加任何类型的边框: */
            border:red solid 5px;
        }
        ol {
            /* 在这里添加任何类型的边框: */
            border:green dashed 5px;
        }
        li {
            /* 在这里添加任何类型的边框: */
            border:green dotted 5px;
        }
        

    标题在这里!

        
        "http://direct.codecombat.com/file/db/thang.type/545bacb41e649a4495f887da/portrait.png"/>
        

            内容在这里!
        
              
    1. 我是一个有序的列表。
    2.         
    3. 请给我一个边框!
    4.         
    5. 我请求你。
    6.  

      本攻略发于极客战记官方教学栏目,原文地址为:

      https://codecombat.163.com/news/jikezhanji-bianjingxunjing

      极客战记——学编程,用玩的!

      「网易官方」极客战记(codecombat)攻略-网页开发2-边境巡警-border-patrol

      标签:有一个   选择   href   请求   极客   das   http   eve   range   

      原文地址:https://www.cnblogs.com/codecombat/p/12932603.html


      评论


      亲,登录后才可以留言!