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>
PreviousAdd Borders Around your Elements(边框属性)NextMake Circular Images with a Border Radius(圆角边框百分比)
Last updated