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

Astral WebBy Astral Web 2 years agoNo Comments
首頁  /  網站設計與開發  /  如何使用CSS(border-radius)畫出圓角DIV

CSS(border-radius)

在使用CSS排版時,div預設的形狀都是方形,因此今天就要教大家如何使用border-radius將div的直角變成圓角。

首先我們先在html準備一個展示效果的div,程式碼如下:

程式碼

<body>
	<div></div>
</body>

預覽後畫面沒有東西嗎?不要緊張,我們接著把CSS加上它就會出現囉!
先準備好裝CSS程式碼的區域:

程式碼

<style type="text/css">
CSS的撰寫區域
</style>

 

接著給他一個5px的邊框(border)並設定div的大小(width、height):

程式碼

<style type="text/css">
	div{
		border:  5px solid #666;
		width: 200px;
		height: 200px;
	}
</style>

這個時候畫面就會出現如下的灰線方框:

image02

接著終於要進到今天的重點——圓角(border-radius)拉!

 

border-radius的基本語法為:

程式碼

border-radius: 圓角值;

 

圓角值的單位可以使用長度單位或%來設定,若只有設定一個數值則四個角都會套用同樣的原角值,效果如下:

CSS(border-radius)

如果想要針對四個角做不同的設,則需輸入四個數值,語法如下:

程式碼

border-top-left-radius: 角1;
border-top-right-radius: 角2;
border-bottom-right-radius: 角3;
border-bottom-left-radius: 角4;

或簡寫成:

程式碼

border-radius:角1 角2 角3 角4;

效果如下:

CSS(border-radius)

 

以上就是今天要教大家的圓角畫法,有興趣的話可以多改些數值來玩玩看呦!

 

歐斯瑞有限公司編寫製作

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。