Add Rounded Corners with a Border Radius(圆角边框)

Add Rounded Corners with a Border Radius

说明:

猫咪图片的边框现在是尖尖的,不够可爱,我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。

你同样可以使用像素来指定border-radius的属性值,现在让你的猫咪图片的边框半径为10px吧。

注意:这个任务有多种解决方案。你可以添加border-radius到.thick-green-border类选择器,也可以添加到.smaller-image类选择器.

原始代码:

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">我家的猫咪</h2>

<img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">

<p class="red-text">我家两岁的小公猫哈哈是个收藏家,臭鱼烂虾,鸡头猪手,无所不爱。清晨我还在睡梦中,突然觉得胸口一沉,恍惚中意识到哈哈又跑到我身上来撒娇,心里不由得滚起温暖的热流,拉过哈哈一把从头摸过背,小家伙顺势想往被子里钻,我一边拒绝着一边往上拉被子,突然脚下一凉,烂泥一样挂在我的大脚趾上的是一块垃圾箱里的鱼头!我顿时睡意全无,换床单洗被罩,天光放亮才勉强收拾妥当。害得我带着熊猫眼跑去上班,一天都没有好心情。实在搞不懂它为什么爱把垃圾叼上床,是故意恶作剧?还是我给的猫粮不够吃?</p>
<p class="red-text">有时候猫会把主人当成自己的孩子(听起来有点令人窝心),这种行为是在给家里带来猎物。它把自己看成是家里的顶梁柱,有责任给不争气的主人找来食物——猫咪通过长时间对你的观察,沉痛地发现你不会打猎。经常出门的猫咪会把它逮到的老鼠、小鸟带回家里,不出门的就经常翻翻垃圾箱找点东西给你。这个时候,主人可不要责骂它,不然它会认为你对它带回来的食物不满意,下次去找更了不起的东西带回来,放在房间里最显眼的地方。但如果你看见它往家里运输死老鼠,最好也别谢它,别让它觉得你对这种猎物很满意,下次照单带回来。最好的办法是心里感念着猫咪所为你做的,并默默地收拾好一切。</p>

调试代码:

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">我家的猫咪</h2>

<img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">

<p class="red-text">我家两岁的小公猫哈哈是个收藏家,臭鱼烂虾,鸡头猪手,无所不爱。清晨我还在睡梦中,突然觉得胸口一沉,恍惚中意识到哈哈又跑到我身上来撒娇,心里不由得滚起温暖的热流,拉过哈哈一把从头摸过背,小家伙顺势想往被子里钻,我一边拒绝着一边往上拉被子,突然脚下一凉,烂泥一样挂在我的大脚趾上的是一块垃圾箱里的鱼头!我顿时睡意全无,换床单洗被罩,天光放亮才勉强收拾妥当。害得我带着熊猫眼跑去上班,一天都没有好心情。实在搞不懂它为什么爱把垃圾叼上床,是故意恶作剧?还是我给的猫粮不够吃?</p>
<p class="red-text">有时候猫会把主人当成自己的孩子(听起来有点令人窝心),这种行为是在给家里带来猎物。它把自己看成是家里的顶梁柱,有责任给不争气的主人找来食物——猫咪通过长时间对你的观察,沉痛地发现你不会打猎。经常出门的猫咪会把它逮到的老鼠、小鸟带回家里,不出门的就经常翻翻垃圾箱找点东西给你。这个时候,主人可不要责骂它,不然它会认为你对它带回来的食物不满意,下次去找更了不起的东西带回来,放在房间里最显眼的地方。但如果你看见它往家里运输死老鼠,最好也别谢它,别让它觉得你对这种猎物很满意,下次照单带回来。最好的办法是心里感念着猫咪所为你做的,并默默地收拾好一切。</p>

Last updated