「网易官方」极客战记（codecombat）攻略-网页开发2-边境巡警-border-patrol
Posted codecombat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了「网易官方」极客战记（codecombat）攻略-网页开发2-边境巡警-border-patrol相关的知识，希望对你有一定的参考价值。
(点击图片进入关卡)
为元素添加边框，能够帮助与其他元素分隔开来。
简介
border 用于在元素周围放置一个漂亮的边框。
div {
border: 3px double purple;
}
默认代码
<!-- 有时间深入研究更多CSS属性。 -->
<!-- 可以添加边框将元素包围起来。 -->
<style>
/* 记住选择一个类，使用一个“.” */
.content {
/* 若要添加默认边框，请添加边框样式 */
/* 边框风格可以是：实心，点缀，… */
/* ...插图，双重，凹槽，田埂，开端 */
border-style:double;
}
/* 记住，选择标签仅仅是标签名称： */
h2 {
/* 边框也具有宽度和颜色属性。 */
border-style:dashed;
border-width:2px;
border-color:orange;
}
p {
/* 还有一个速记属性 "border" */
/* 简单地包括大小、样式和宽度！ */
border:green dotted 5px;
}
img {
/* 在这里添加任何类型的边框： */
}
ol {
/* 在这里添加任何类型的边框： */
}
li {
/* 在这里添加任何类型的边框： */
}
</style>
<div class="content">
<h2>标题在这里！</h2>
<img class="selectable"src=
"http://direct.codecombat.com/file/db/thang.type/
545bacb41e649a4495f887da/portrait.png"/>
<p>
内容在这里！
</p>
</div>
<ol>
<li>我是一个有序的列表。</li>
<li>请给我一个边框！</li>
<li>我请求你。</li>
</ol>
概览
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;
}
边境巡警 解法
<!-- 有时间深入研究更多CSS属性。 -->
<!-- 可以添加边框将元素包围起来。 -->
<style>
/* 记住选择一个类，使用一个“.” */
.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;
}
</style>
<div class="content">
<h2>标题在这里！</h2>
<img class="selectable" src=
"http://direct.codecombat.com/file/db/thang.type/545bacb41e649a4495f887da/portrait.png"/>
<p>
内容在这里！
</p>
</div>
<ol>
<li>我是一个有序的列表。</li>
<li>请给我一个边框！</li>
<li>我请求你。</li>
</ol>
以上是关于「网易官方」极客战记（codecombat）攻略-网页开发2-边境巡警-border-patrol的主要内容，如果未能解决你的问题，请参考以下文章
网易官方极客战记（codecombat）攻略-森林-村庄守护者
网易官方极客战记（codecombat）攻略-森林-If 的盛宴
「网易官方」极客战记（codecombat）攻略-游戏开发2-越狱-jailbreak
「网易官方」极客战记（codecombat）攻略-森林-小心陷阱