怎么使用border-radius屬性-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是一家專業(yè)提供仙游企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、H5網(wǎng)站設(shè)計、小程序制作等業(yè)務(wù)。10年已為仙游眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

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

我們在平時看border-radius屬性會看到它的語法如下所示

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

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

接下來我們就來具體看一下border-radius屬性的用法

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

圓角邊框

<!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é)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：怎么使用border-radius屬性-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.chinadenli.net/article22/ccigcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、做網(wǎng)站、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用border-radius屬性-創(chuàng)新互聯(lián)