iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 09: 月亮圓又圓,用 border-radius 讓你圓又圓

  • 分享至 

  • xImage
  •  

雖然離中秋節還很遠, 已經想烤肉了XD ,但每次抬頭仰望星空,看到月亮一點一滴的變化,
讓我心中掀起小波瀾,心中思考著要如何讓月亮長存,而不是只有黑夜。

如何使用CSS(border-radius)畫出圓角?

就要利用CSS語法border-radius

  border-radius: 20px ;
             //全部的角
        border-radius: 20px 20px 20px 20px;
 //順時針的順序來指定的:左上、右上、右下、左下。
border-radius: 20px 0;
          //左上及右下、右上及左下 
          //簡單理解,就是左上對角、右上對角

如果我們不想要有菱有角,想要圓潤一點,可以這樣設定

<p>
  床前明月光,
  疑是地上霜。
  舉頭望明月,
  低頭思故鄉。
</p>
<style>
p{
  padding: 10px;
  width: 300px;
  height: 300px;
  background-color: yellow;
  border-radius: 20px; 
      //全部的角值:20px
}
</style>

https://ithelp.ithome.com.tw/upload/images/20200323/20124879RGEkclSGyA.png

月圓人團圓,肚子不要圓

可以直接用 %,可以記得一個特別的用法。
如果你用 50% 就會出現標準的圓型

<div class="moon"></div>
<style>
  .moon{
  width:200px;
  height:200px;
  border-radius:50%;
  background-color: yellow;
}
</style>

https://ithelp.ithome.com.tw/upload/images/20200323/20124879iih7j7zaEz.png

月亮切一半(猜一字)

  <div class="moon"></div>
  <style>
  .moon{
  width:200px;
  height:100px;
  border-radius:200px 200px 0 0;
  background-color: yellow;
}
  </style>

https://ithelp.ithome.com.tw/upload/images/20200323/20124879lLMASLYHSr.png

答案:用

技術總結

  • border-radius:左上、右上、右下、左下。
  • border-radius:左上對角、右上對角。
  • 想要畫圓形,border-radius:50%;

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言