css圆角矩形的制作(border-radius)的表示方法

  • border-radius: 宽/高一半;
  • border-radius: 50%;
  • border-radius: 0.2em;
  • border-radius: 100px;
  • border-radius: 左上角 右上角 右下角 左下角。

绘制圆形

.one{
      width: 100px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

绘制小型引导框

.one{
    width: 20px;
    height: 20px;
    background: #C81623;
    border-radius: 50% 50% 50% 0;
}

绘制同心圆

.one{
     width: 100px;
     height: 100px;
     background: #C81623;
     border:20px solid yellow;
     border-radius: 50%;
}

绘制椭圆

 .one{
      width: 200px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}
最后修改:2018 年 02 月 26 日
如果觉得我的文章对你有用,请随意赞赏