CSS3|border-radius 畫出圓角效果

想要畫出圓角效果嗎?除了使用圖片來設定外,現在透過CSS也能完成一樣的效果。

HTML

<body>
	<div class="box1">CSS</div>
	<div class="box2">IS</div>
	<div class="box3">FUN</div>

</body>

CSS border-radius 圓角效果

這邊簡單的說一下border-radius值的內容,總共有四個數值分別為:左上右上右下左下,那這邊設定後會依序得到下列我們所設定的CSS樣示。

border-radius

圓形設定

border-radius
.box1{
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #28A8A7;
  border: 5px solid #0C4767;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  line-height: 100px;
}

上方圓角設定

border-radius
.box2{
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #28A8A7;
  border: 5px solid #0C4767;
  border-radius: 15px 25px 0 0;
  text-align: center;
  color: #fff;
  line-height: 100px;
}

對向圓角設定

border-radius
.box3{
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #28A8A7;
  border: 5px solid #0C4767;
  border-radius: 0 30px 0 30px;
  text-align: center;
  color: #fff;
  line-height: 100px;
}

圓角設定可以依據想要的角度,在數值部分調整,相當有趣。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *