CSS3案例:为段落添加圆角边框
来自CloudWiki
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style> div{margin:20px; border: 10px solid red;} .para { width:300px; line-height:50px; padding:5px; height: 50px; border-top-left-radius:150px 25px; /*单个圆角值不会出现'/',用空格分隔,值分别为水平半径和垂直半径*/ border-bottom-right-radius:50% 50%; /*单个圆角值不会出现'/',用空格分隔,百分比分别指占外边框的宽和高的比例*/ } .para2 { width:300px; line-height:50px; padding:5px; height: 50px; border-radius:100px/50px; /*多个圆角值设置可以用'/',前后两个值粉笔表示所有圆角的水平半径和垂直半径*/ } </style> </head> <body> <div class="para">关于配送延迟的通知,请相互转告</div> <div class="para2">关于配送延迟的通知,请相互转告</div> </body> </html>