css中border-radius指的是什么意思

這篇文章給大家分享的是有關css中border-radius指的是什么意思的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都網(wǎng)絡公司-成都網(wǎng)站建設公司創(chuàng)新互聯(lián)十余年經(jīng)驗成就非凡，專業(yè)從事做網(wǎng)站、成都網(wǎng)站建設，成都網(wǎng)頁設計，成都網(wǎng)頁制作，軟文發(fā)稿，1元廣告等。十余年來已成功提供全面的成都網(wǎng)站建設方案，打造行業(yè)特色的成都網(wǎng)站建設案例，建站熱線：13518219792，我們期待您的來電！

border-radius的意思為“邊框圓角;圓角半徑”，它是css的一個屬性，用于給元素的邊框創(chuàng)建（1~4個）圓角效果；基本語法為“border-radius: 1-4 length|%”，設置方向為左上角、右上角、右下角、左下角。

border-radius

css中border-radius指的是什么意思

border-radius是CSS3中的一個簡寫屬性，用于為邊框創(chuàng)建（1~4個）圓角效果。

語法：

border-radius: 1-4 length|%

值：

  • length    定義彎道的形狀。

  • %    使用%定義角落的形狀。

注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

  • 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

  • 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角

  • 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角

  • 一個值： 四個圓角值相同

示例：

1. 四個值 - border-radius: 15px 50px 30px 5px

css中border-radius指的是什么意思

2. 三個值 - border-radius: 15px 50px 30px

css中border-radius指的是什么意思

3. 兩個值 - border-radius: 15px 50px

css中border-radius指的是什么意思

4、橢圓邊角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

<p>橢圓邊框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p> 橢圓邊框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>橢圓邊框 - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

css中border-radius指的是什么意思

感謝各位的閱讀！關于“css中border-radius指的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：css中border-radius指的是什么意思
分享網(wǎng)址：http://muchs.cn/article8/pdppip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站維護、品牌網(wǎng)站制作、品牌網(wǎng)站建設、定制開發(fā)、軟件開發(fā)

廣告

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

搜索引擎優(yōu)化