CSS 基础学习-055 使用border-radius属性设置圆角边框

由 hrs, 7 九月, 2021

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

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>border-radius 设置圆角边框</title>
    <style>
      p{  
        width:300px;
        border-color:red;
        text-align:center;
      }   

      .radius1{
        border-radius:0px ;
        border-style:solid;
      }   
      .radius2{
        border-radius:5px ;
        border-style:solid;
      }   
      .radius3{
        border-radius:8px ;
        border-style:solid;
      }   
      .radius4{
        border-radius:12px ;
        border-style:solid;
      }   

    </style>
  </head>
  <body>
    <h1>border-radius 设置圆角边框</h1>
    <p class="radius1">普通边框</p>
    <p class="radius2">圆角边框</p>
    <p class="radius3">圆角边框</p>
    <p class="radius4">圆角边框</p>
  </body>
</html>

运行效果：

css-055.png

标签

评论