怎么使用border-radius屬性

發(fā)布時(shí)間：2020-07-13 11:35:26 來(lái)源：億速云閱讀：208 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么使用border-radius屬性，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

border-radius屬性是一個(gè)邊框?qū)傩裕梢杂糜谠O(shè)置邊框圓角，那么border-radius屬性的具體用法是怎樣的呢？本篇文章就來(lái)給大家介紹一下關(guān)于border-radius屬性的具體用法。下面我們來(lái)看具體的內(nèi)容。

我們?cè)谄綍r(shí)看border-radius屬性會(huì)看到它的語(yǔ)法如下所示

　border-radius: 1-4 length|% / 1-4 length|%;

很多人可能不知道這是什么意思，其實(shí)這是border-radius的完整寫法，我們平時(shí)寫就是，border-radius:20px;，完整的寫法應(yīng)該是：border-radius : 20px 20px 20px 20px / 20px 20px 20px 20px;，其中前面四個(gè)20px表示水平半徑，后面的四個(gè)值則表示垂直半徑，我們就是通過設(shè)置水平半徑和垂直半徑來(lái)繪制橢圓或者圓形，也可以繪制一些其他有弧度的圖形。

接下來(lái)我們就來(lái)具體看一下border-radius屬性的用法

我們可以設(shè)置一個(gè)圓角邊框或者是一個(gè)圓形

圓角邊框

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

效果如下

怎么使用border-radius屬性

圓形

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

效果如下

怎么使用border-radius屬性

可以設(shè)置帶有弧度的其他圖形

代碼如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

效果如下

怎么使用border-radius屬性

上述內(nèi)容就是怎么使用border-radius屬性，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么使用border-radius屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽