css从中挖去一个圆
始终居中：
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从中挖去一个圆的更多相关文章
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
- matlab-画一个圆
我们可以用 李萨如图形 的思路去画一个圆,或者一个椭圆. x,y是圆心所在坐标,r是半径,nseg是边缘段数(越高,边缘越顺滑,建议100以上),S是plot的样式设置字符 function Draw ...
- zrender源码分析--初探如何画一个圆
今天是想看看使用zrender框架如何去,画一个圆,再加“circle”的文字在圆心. 然后开始代码: 如何部署代码,让zrender跑起来这边就不说了,官方例子就有写,地址是:https://git ...
- 用HTML5canvas绘制一个圆环形的进度表示
先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是: 这个文档标识要比HTML4的简单 ...
- SDL系列之 - 用SDL动态地画一个圆喽 && 设置背景色
#include <SDL.h> #include <stdlib.h> #include <string.h> #include <math.h> # ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- 就这么漂来漂去---一个毕业三个月的java程序员的裸辞风波
注:这并不是一篇技术文章,而是记录了我这几个月经历的入职,裸辞,找工作的心路历程,简单介绍一个博主的情况,我是16年毕业生,校招进了一家北京的公司,java开发,和很多年轻人一样,干了一段时间,我发现 ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- PostScript的简单例子-用粗线画一个圆
一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...
随机推荐
- sql server服务看不到，显示为远程过程调用在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误10061
需要启动sql server服务 启动就可以完成登录了
- 使用while循环和伪列的存储过程
使用while循环和伪列的存储过程如下: USE [JointFrame2] GO /****** Object: StoredProcedure [dbo].[Proc_enterprise_uni ...
- MySQL主从不一致的几种故障总结分析、解决和预防
(1).主从不一致故障,从库宕机,从库启动后重复写入数据报错解决与预防:relay_log_info_repository=TABLE(InnoDB)参数解释说明:若relay_log_info_re ...
- 简洁经常使用权限系统的设计与实现(一):构造权限菜单树的N(N>=4)种方法
权限系统.Web开发常见标准子系统之中的一个.结合自己的一些思考和实践,从本篇開始权限系统的设计与实现之路. 近期,重构了项目的权限菜单构造过程,向前端返回json格式的权限树. 这一篇.仅仅是大致介 ...
- 华中农业大学校赛--c The Same Color
Problem C: The Same Color Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 993 Solved: 595[Submit][St ...
- Unity3D学习（十一）：关于UI销毁后图集仍然无法释放问题的解决办法
前言 最近进行项目性能优化的时候发现的问题. 问题 从大厅进到单局的过程中,会经过选择英雄和加载两个流程,这两个流程对应的UI界面都会有一张几mb左右的贴图作为背景,在进入单局游戏后这两个UI已经销毁 ...
- 如果本身kali就在局域网，shell在外网，怎么反弹连接呢？
kali虚拟机使用桥接,路由器端口映射监听的端口即可.
- ubuntu下更改分辨率
在虚拟机中装了ubuntu但是没有1600*900的分辨率 第一步: xrandr -q 查看现在系统中所有的分辨率 第二步: cvt 1600 900 得到所需的更改分辨率数据 第三步: ww ...
- 实现现下列哪一种接口的对象，并不需要在web.xml文件内进行额外的设定，Servlet容器就能够回应该对象加入HTTP会话所发生的事件？(选择1项)
实现现下列哪一种接口的对象,并不需要在web.xml文件内进行额外的设定,Servlet容器就能够回应该对象加入HTTP会话所发生的事件?(选择1项) A．ServletContextListener ...
- 10个网页设计师必备的CSS技巧（转）
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...