CSS3 圆角边框


CSS 圆角边框

border-radius 属性用于向元素添加圆角边框:

普通边框

圆角边框

圆角边框

圆角边框

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.normal {
  6. border: 2px solid red;
  7. }
  8. p.round1 {
  9. border: 2px solid red;
  10. border-radius: 5px;
  11. }
  12. p.round2 {
  13. border: 2px solid red;
  14. border-radius: 8px;
  15. }
  16. p.round3 {
  17. border: 2px solid red;
  18. border-radius: 12px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>border-radius 属性</h1>
  24. <p>此属性用于为元素添加圆角:</p>
  25. <p class="normal">普通边框</p>
  26. <p class="round1">圆角边框</p>
  27. <p class="round2">角更圆的边框</p>
  28. <p class="round3">角最圆的边框</p>
  29. </body>
  30. </html>

再看3个例子:1、带有指定背景颜色的元素的圆角:

圆角!

2、带边框元素的圆角:

圆角!

3、带有背景图像的元素的圆角:

圆角!

这是代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #rcorners1 {
  6. border-radius: 25px;
  7. background: #73AD21;
  8. padding: 20px;
  9. width: 200px;
  10. height: 150px;
  11. }
  12. #rcorners2 {
  13. border-radius: 25px;
  14. border: 2px solid #73AD21;
  15. padding: 20px;
  16. width: 200px;
  17. height: 150px;
  18. }
  19. #rcorners3 {
  20. border-radius: 25px;
  21. background: url(/images/paper.gif);
  22. background-position: left top;
  23. background-repeat: repeat;
  24. padding: 20px;
  25. width: 200px;
  26. height: 150px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h1>圆角边框属性</h1>
  32. <p>具有指定背景色的元素的圆角:</p>
  33. <p id="rcorners1">圆角!</p>
  34. <p>带边框元素的圆角:</p>
  35. <p id="rcorners2">圆角!</p>
  36. <p>具有背景图像的元素的圆角:</p>
  37. <p id="rcorners3">圆角!</p>
  38. </body>
  39. </html>

备注:border radius属性实际上是border top left radiusborder top right radiusborder bottom right radiusborder bottom left radius属性的简写属性。


CSS border-radius - 指定每个角border-radius 属性可以接受一到四个值。规则如下:

四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角):

三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角):

两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角):

一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的):

这是代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #rcorners1 {
  6. border-radius: 15px 50px 30px 5px;
  7. background: #73AD21;
  8. padding: 20px;
  9. width: 200px;
  10. height: 150px;
  11. }
  12. #rcorners2 {
  13. border-radius: 15px 50px 30px;
  14. background: #73AD21;
  15. padding: 20px;
  16. width: 200px;
  17. height: 150px;
  18. }
  19. #rcorners3 {
  20. border-radius: 15px 50px;
  21. background: #73AD21;
  22. padding: 20px;
  23. width: 200px;
  24. height: 150px;
  25. }
  26. #rcorners4 {
  27. border-radius: 15px;
  28. background: #73AD21;
  29. padding: 20px;
  30. width: 200px;
  31. height: 150px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <h1>圆角边框属性</h1>
  37. <p>四个值 - border-radius: 15px 50px 30px 5px;</p>
  38. <p id="rcorners1"></p>
  39. <p>三个值 - border-radius: 15px 50px 30px;</p>
  40. <p id="rcorners2"></p>
  41. <p>两个值 - border-radius: 15px 50px;</p>
  42. <p id="rcorners3"></p>
  43. <p>一个值 - border-radius: 15px;</p>
  44. <p id="rcorners4"></p>
  45. </body>
  46. </html>

您还可以创建椭圆:

  1. <html>
  2. <head>
  3. <style>
  4. #rcorners1 {
  5. border-radius: 50px / 15px;
  6. background: #73AD21;
  7. padding: 20px;
  8. width: 200px;
  9. height: 150px;
  10. }
  11. #rcorners2 {
  12. border-radius: 15px / 50px;
  13. background: #73AD21;
  14. padding: 20px;
  15. width: 200px;
  16. height: 150px;
  17. }
  18. #rcorners3 {
  19. border-radius: 50%;
  20. background: #73AD21;
  21. padding: 20px;
  22. width: 200px;
  23. height: 150px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <h1>border-radius 属性</h1>
  29. <p>椭圆边框 - border-radius: 50px / 15px:</p>
  30. <p id="rcorners1"></p>
  31. <p>椭圆边框 - border-radius: 15px / 50px:</p>
  32. <p id="rcorners2"></p>
  33. <p>椭圆边框 - border-radius: 50%:</p>
  34. <p id="rcorners3"></p>
  35. </body>
  36. </html>

所有 CSS 边框属性

属性描述
border简写属性,在一条声明中设置所有边框属性。
border-color简写属性,设置四条边框的颜色。
border-radius简写属性,可设置圆角的所有四个 border-*-radius 属性。
border-style简写属性,设置四条边框的样式。
border-width简写属性,设置四条边框的宽度。
border-bottom简写属性,在一条声明中设置所有下边框属性。
border-bottom-color设置下边框的颜色。
border-bottom-style设置下边框的样式。
border-bottom-width设置下边框的宽度。
border-left简写属性,在一条声明中设置所有左边框属性。
border-left-color设置左边框的颜色。
border-left-style设置左边框的样式。
border-left-width设置左边框的宽度。
border-right简写属性,在一条声明中设置所有右边框属性。
border-right-color设置右边框的颜色。
border-right-style设置右边框的样式。
border-right-width设置右边框的宽度。
border-top简写属性,在一条声明中设置所有上边框属性。
border-top-color设置上边框的颜色。
border-top-style设置上边框的样式。
border-top-width设置上边框的宽度。

分类导航