CSS3 圓角
CSS3?圓角
#CSS3 border-radius 屬性
#使用CSS3 border-radius 屬性,你可以為任何元素製作"圓角"。
實例
下面是三種圓角實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文網(wǎng)(php.cn)</title> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/upload/course/000/000/006/5809800b44336872.jpg); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p> border-radius 屬性允許向元素添加圓角。</p> <p>指定背景顏色元素的圓角:</p> <p id="rcorners1">圓角</p> <p>指定邊框元素的圓角:</p> <p id="rcorners2">圓角</p> <p>指定背景圖片元素的圓角:</p> <p id="rcorners3">圓角</p> </body> </html>
執(zhí)行程式嘗試
#CSS3 border-radius - 指定每個圓角
#如果你在border-radius 屬性中只指定一個值,那麼將產(chǎn)生4 個圓角。
但是,如果你要在四個角落一一指定,可以使用下列規(guī)則:
四個值:?第一個值為左上角,第二個值為右上角,第三個值為右下角,第四個值為左下角。三個值:?第一個值為左上角, 第二個值為右上角和左下角,第三個值為右下角兩個值:?第一個值為左上角與右下角,第二個值為右上角與左下角一個值:?四個圓角值相同
以下為三個實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文網(wǎng)(php.cn)</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f2f732; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #ffaacd; 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>
執(zhí)行程式試試看
#建立橢圓邊角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文網(wǎng)(php.cn)</title> <style> #rcorners7 { border-radius: 50px/15px; background: #f2f77e; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #57fff0; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #ff9b41; 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>
執(zhí)行程式嘗試