一篇文章帶你瞭解CSS3圓角知識
一、瀏覽器支援
表中的數字指定完全支援該屬性的第一個瀏覽器版本。
數字後面的 -webkit- 或者 -moz- 使用時需要指定字首。
屬性 | Chrome | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
二、border-radius 屬性
1. 建立具有背景圖的圓角
CSS3中,可以使用border-radius
屬性,為元素指定圓角顯示。
程式碼如下:
<!DOCTYPE html> <html> <meta charset="UTF-8"> <title>專案</title> <head> <style> #rcorners1 { border-radius: 25px; background: #f00; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(img/fy_indexBg.jpg); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>The border-radius property allows you to add rounded corners to elements.</p> <p>Rounded corners for an element with a specified background color:</p> <!--1.具有指定背景色的圓角元素--> <p id="rcorners1">Rounded corners!</p> <p>Rounded corners for an element with a border:</p> <!--2.帶邊框的圓角元素:--> <p id="rcorners2">Rounded corners!</p> <!--3.帶背景圖的圓角元素--> <p>Rounded corners for an element with a background image:</p> <p id="rcorners3">Rounded corners!</p> </body> </html>
提示:
border-radius
屬性實際是border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
和 border-bottom-left-radius
屬性的簡寫。
2. 為每個角指定弧度
如果只為border-radius
屬性指定一個值,則此半徑將應用於所有4個角。
另外可以根據自己開發的需求,分別指定每個角。以下是規則:
四個值: 第一個值適用於左上角,第二個值適用於右上方,第三值應用於右下角,第四值適用於左下角。
三個值: 第一個值適用於左上,二值適用於右上和左下,右下第三值適用於。
兩個值: 第一個值適用於左上和右下角,和二值適用於右上和左下角。
一個值: 所有的四個角都是圓的。
例項1:
1.四個值 - border-radius: 15px 50px 30px 5px
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
2.三個值 - border-radius: 15px 50px 30px
#rcorners5 { border-radius: 15px 50px 30px; background: #f00; padding: 20px; width: 200px; height: 150px; }
3.兩個值 - border-radius: 15px 50px
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
完整程式碼 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>專案</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四個值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三個值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>兩個值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>
例項2:
建立橢圓形的圓角
建立橢圓形的圓角
橢圓邊框 :border-radius: 50px/15px
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
橢圓邊框 : border-radius: 15px/50px
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
橢圓邊框 : border-radius: 50%
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
完整程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>專案</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
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>
三、總結
1、本文主要講解了CSS3圓角,通過一些屬性的演示,豐富的案例,幫助大家理解CSS知識。希望大家可以耐心的去學習,同時希望碰到問題主動搜尋,嘗試一下,總會有解決方法。
2、程式碼很簡單,希望能幫到你。
想學習更多Python網路爬蟲與資料探勘知識,可前往專業網站:http://pdcfighting.com/