border-radio属性

boreder-radio属性是css3的新增属性,可以设置圆角的边框。
  
  <head> 
    <style type="text/css">

      *{
        margin: 0;
        padding: 0;
      }
      .roundedCorner{
        width:100px;/*宽*/
        height: 100px;/*高*/
        border-radius: 10px;/*圆角角度左上,右上,右下,左下都是10px*/
        background: deepskyblue;/*背景颜色*/
        margin: 20px auto;/*上下间距20px,左右居中*/
      }
    </style>
  </head>
  <body>
    <div class="roundedCorner"></div>
  </body>

  效果图:

border-radio属性

  border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。

  制作的方法:

  <head>

    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .roundedCorner{
        width: 100px;/*宽*/
        height: 100px;/*高*/
        border-radius: 50%;/*圆角角度设置50%,不要设置具体数值,如果哦下面的border值大的话会变形*/
        background: deepskyblue;/*背景颜色*/
        margin: 20px auto;/*上下间距20px,左右居中*/
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    <div class="roundedCorner"></div>
  </body>

效果图

border-radio属性

制作半圆的方法;

  <head>

    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .roundedCorner{
        width: 100px;/*宽*/
        height: 50px;/*高*/
        border-radius: 50px 50px 0 0;/*圆角角度*/
        background: deepskyblue;/*背景颜色*/
        margin: 20px auto;/*上下间距20px,左右居中*/

      }
    </style>
  </head>
  <body>
    <div class="roundedCorner"></div>
  </body>

效果图

border-radio属性

上一篇:CentOS的ssh sftp配置及权限设置(流程相当完整)(关闭了SElinux才能上传了)


下一篇:HDU 4548 美素数(打表)