图形的制作

图形的制作

圆形

.circle {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: #d7d8d8;
}

圆圈里画勾

.circleCommon {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  right: 0;
  border: 1px solid #529fff;
  background-color: #529fff;
  cursor: pointer;
  .gouCommon {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 6px;
    height: 9px;
    color: #fff;
    content: "";
    border-left: 0;
    border-top: 0;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    border: 2px solid #fff;
  }
}

四分之圆的绘制

.sifenyuan {
  width: 80px;
  height: 80px;
  border-radius: 0 0 0 100%;
  background: rgba(0, 0, 0, 0.5);
}

  转载请注明: 迷一样的自信 图形的制作

 上一篇
window对象 window对象
window对象document  操作文档dom的对象 location  包含浏览器当前的url信息 navigation  包含浏览器本身的信息 screen  包含客户端屏幕及渲染能力 history  浏览器访问网页的历史信息
2018-06-23
下一篇 
小功能的实现 小功能的实现
小功能的实现仿照浏览器的复制<body> <!-- type = "text" 才有select() --> <input type="text" class="copy-text" re
2018-06-17
  目录