始终居中：

            width: 300px;

            position: fixed;
/*在可视区域的上下左右居中*/
 top: calc(50vh - 200px); 
 left: calc(50vw - 150px);

二分之一圆的边：

            border: 1px solid #fff;

            position: absolute;

            width: 30px;

            height: 60px;

            border-width: 1px 0px 1px 1px;

            border-radius: 30px 0 0 30px;

            top: calc(50% - 30px);

            right: 0;

完整：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 Calc</title>

    <style type="text/css" media="screen">

        body{

            background-image: url('../js-test/1.jpg');background-repeat: no-repeat;

        }

        .square, .square > div { box-sizing: border-box; }

        .square {

            width: 300px;

            position: fixed;

            top: calc(50vh - 200px);

            left: calc(50vw - 150px);

            overflow: hidden;

        }

        .square > .s-top {

            border: 1px solid #fff;

            height: 170px;

            border-radius: 5px 5px 0 0;

            border-width: 1px 1px 0 1px;

        }

        .square > .s-middle {

            border-left: 1px solid #fff;

            height: 60px;

        }

        .square > .s-bottom {

            border: 1px solid #fff;

            height: 170px;

            border-radius: 0 0 5px 5px;

            border-width: 0px 1px 1px 1px;

        }

        .square > .s-half-circle {

            border: 1px solid #fff;

            position: absolute;

            width: 30px;

            height: 60px;

            border-width: 1px 0px 1px 1px;

            border-radius: 30px 0 0 30px;

            top: calc(50% - 30px);

            right: 0;

        }

        .square > .s-background {

            border: 360px solid rgba(255,255,255,0.3);

            position: absolute;

            width: 780px;

            height: 780px;

            border-radius: 50%;

            top: calc(50% - 390px);

            right: -390px;

        }

        .circle {

            width: 50px;

            height: 50px;

            border: 1px solid #fff;

            border-radius: 50%;

            position: absolute;

            top: calc(50% - 25px);

            left: calc(50% + 125px);

            background-color: rgba(255,255,255,.3);

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div class="square">

    <div class="s-top"></div>

    <div class="s-middle"></div>

    <div class="s-bottom"></div>

    <div class="s-half-circle"></div>

    <div class="s-background"></div>

</div>

<div class="circle"></div>

</body>

</html>

css从中挖去一个圆的更多相关文章

  1. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  2. matlab-画一个圆

    我们可以用 李萨如图形 的思路去画一个圆,或者一个椭圆. x,y是圆心所在坐标,r是半径,nseg是边缘段数(越高,边缘越顺滑,建议100以上),S是plot的样式设置字符 function Draw ...

  3. zrender源码分析--初探如何画一个圆

    今天是想看看使用zrender框架如何去,画一个圆,再加“circle”的文字在圆心. 然后开始代码: 如何部署代码,让zrender跑起来这边就不说了,官方例子就有写,地址是:https://git ...

  4. 用HTML5canvas绘制一个圆环形的进度表示

    先看一下画出来的效果,如下图,这样一个圆环形的进度.  我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: 这个文档标识要比HTML4的简单 ...

  5. SDL系列之 - 用SDL动态地画一个圆喽 && 设置背景色

    #include <SDL.h> #include <stdlib.h> #include <string.h> #include <math.h> # ...

  6. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  7. 就这么漂来漂去---一个毕业三个月的java程序员的裸辞风波

    注:这并不是一篇技术文章,而是记录了我这几个月经历的入职,裸辞,找工作的心路历程,简单介绍一个博主的情况,我是16年毕业生,校招进了一家北京的公司,java开发,和很多年轻人一样,干了一段时间,我发现 ...

  8. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

随机推荐

  1. ASIHTTPRequest 简单使用

    ASIHTTPResquest 框架功能强大,应用非常多. 曾经写过ASIHTTPResquest的导入,如今就看一下基本使用 记一下当中基础的操作: 1.发送同步请求: NSURL * url = ...

  2. EF6 Code First 模式更新数据库架构

    定义好实体类和上下文类 在 Package Manager Console 输入以下命令 1.Enable-Migrations 启用数据迁移功能,该命令通常会在项目根目录下生成 Migrations ...

  3. 网站收到的url请求链接，字母全部变为小写

    http://www.ithao123.cn/content-5360465.html

  4. unity, instantiate一个实例后，先指定parent，再指定position

    instantiate一个实例后,先指定parent,再指定position,才能保证position正确,如果先指定position再指定parent,则position会错误.

  5. Atitit.解决org.hibernate.DuplicateMappingException: Duplicate class/entity mapping

    Atitit.解决org.hibernate.DuplicateMappingException: Duplicate class/entity mapping 1. 排除流程::: @Depreca ...

  6. mysql root 用户被删

    [root@M ~]# vi /etc/my.cnf [mysqld] skip-grant-tables [root@M ~]# service mysqld restart Shutting do ...

  7. path方法总结

    $.mobile.path.get(url);//获取URL地址的目录部分,就是除了a.html之外的那部分 jQuery.mobile.path.getDocumentBase(bool) //获取 ...

  8. android.graphics(1) - Paint, Canvas, drawLine, drawPoint, drawRect, drawRoundRect, drawCircle, drawOval, drawArc

    一.Paint与Canvas 像我们平时画图一样,需要两个工具,纸和笔.Paint就是相当于笔,而Canvas就是纸,这里叫画布. 所以,凡有跟要要画的东西的设置相关的,比如大小,粗细,画笔颜色,透明 ...

  9. form之action的绝对路径与相对路径

    1.当你的form要提交到你自己的站点之外的URL的时候,就采取绝对路径: <form action="http://www.xxx.yyy:zzzz/mmm/nn/kkk.jsp&q ...

  10. lo4j 日志级别

    日志记录器(Logger)的行为是分等级的.如下表所示: 分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE.ALL或者您定义的级别.Log4j建议只使用四个级别,优先级从 ...