Ming Apps

CSS3 Tutorial: border-radius – round corner

Posted on: 2011/04/03


HTML5 Powered with CSS3 / Styling

示範 Demostration:
ming-apps-css3-round-corner.htm

Step 1: 加入以下Source code於Header中:


.box_round {
  -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}
.box_round_2 {
  -moz-border-radius: 12px 0px 36px 24px; /* FF1+ */
  -webkit-border-radius: 12px 0px 36px 24px; /* Saf3-4, iOS 1+, Android 1.5+ */
  border-radius: 12px 0px 36px 24px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
  background-color: #ccc;
}

Step 2: 在div等tag name中加入class name box_round or box_round_2:

<div>Ming Apps HTML5!</div>
<div>CSS3 Round corner!</div>

Step3: 完成!

Ming Apps CSS3 tutorial round corner demo

大家可以嘗試改變Color值以及round corner四個corner的radius值改變四角的彎度!

標籤: , ,

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: