那些遇到过的问题

透明空心或切圆圈

chr*_*ris 55 css svg transparency css3 css-shapes

是否可以仅使用CSS 切出空心圆？

我们都可以这样做:

正常的CSS圈子

但我们可以这样做吗？

div中的透明空心圆

的圆必须是中空的,并且透明.因此,通过在a上放置一个纯色圆圈就无法解决问题div.

web*_*iki 62

您可以使用两种不同的技术实现透明切割圆:

1.SVG

以下示例使用内联svg.第一个片段使用蒙版元素剪切透明圆圈,第二个空心圆圈使用路径元素.圆圈由2个弧命令组成:

使用mask元素:

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
Run Code Online (Sandbox Code Playgroud) 
<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="30">
      <rect x="5" y="5" width="90" height="40" fill="#fff"/>
      <circle cx="50" cy="25" r="15" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>    
</svg>
Run Code Online (Sandbox Code Playgroud)

有一个路径元素:

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
  display:block;
  width:70%;
  height:auto;
  margin:0 auto;
}
path{
  transition:fill .5s;
  fill:#E3DFD2;
}
path:hover{
  fill:pink;
}
Run Code Online (Sandbox Code Playgroud) 
<svg viewbox="-10 -1 30 12">
  <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>
Run Code Online (Sandbox Code Playgroud)

在这种情况下使用SVG的主要优点是:

  • 更短的代码
  • 您可以轻松使用图像或渐变来填充圆形蒙版
  • 保持形状的边界并触发鼠标仅在面对面具的填充上发生(在示例中悬停透明切出的圆圈)

透明切出圆圈

2. CSS仅使用BOX-SHADOWS

overflow:hidden;使用border-radius在其中创建一个div 和一个圆形伪元素.给它一个巨大的盒子阴影,没有背景:

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
Run Code Online (Sandbox Code Playgroud)

浏览器对框阴影的支持是IE9 +请参阅canIuse

相同的方法是使用边框而不是框阴影.如果你需要支持不支持像IE8这样的盒子阴影的borowsers,这很有意思.技术是相同的,但您需要使用顶部和左侧值进行补偿,以使圆圈保持在div的中心:

body{
    background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
    background-size:cover;
}
div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:-325px; top:-475px;
    border-radius:100%;
    width:150px; height:150px;
    border:500px solid #E3DFD2;
}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
Run Code Online (Sandbox Code Playgroud)

  • 非常感谢 box-shadow，天哪，我怎么没想到那个！：/我知道可以使用一些超出边界的圆圈来完成。但你成功了！ (2认同)

Ion*_*tan 25

它可以使用径向渐变背景和指针事件来完成(以允许鼠标通过圆圈层进行交互,例如文本选择).这是一个演示页面和截图:

在此输入图像描述

这将是它的代码:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<style type="text/css" media="screen">
body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  pointer-events: none; /* send mouse events beneath this layer */
}
</style>
</head>
<body>

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

doA*_*721 15

参考web-tiki的回答我想补充一点,你可以随时使用div translate(-50%,-50%),因此使用border-property 是没有问题的,它具有更好的浏览器支持.

div{
    position:relative;
    width:500px; 
    height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius:50%;
    width:150px; height:150px;
    border: 1000px solid rebeccapurple;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
Run Code Online (Sandbox Code Playgroud)

您可以使用此技术获得真正的创意:

document.addEventListener( "DOMContentLoaded", function(){ 
	setInterval(function(){
		if(document.getElementById("moving").style.height === "500px"){
			document.getElementById("moving").style.height = "0px";
		} else {		
			document.getElementById("moving").style.height = "500px";
		}
	}, 2000);
});
Run Code Online (Sandbox Code Playgroud) 
#container {
	width: 500px;
	margin: 0 auto;
	border: 1px solid black;
	overflow:hidden;
	position: relative;
}


#circle{
    position:relative;
    height:150px;
    margin:0 auto;
	clear:left;
	overflow:hidden;
}
#circle::before, #circle::after {
    content:'';
    border-radius:50%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#circle::before {
    height: 140px;
    width: 140px;
    background: rebeccapurple;
}
#circle::after{
    width:150px; 
	height:150px;
    border: 2000px solid rebeccapurple;
}

#line {
	margin: 0 auto;
	width: 6px;
	height: 200px;
	position: relative;
}
#line::before, #line::after {
	content: " ";
	background-color: rebeccapurple;
    height: 200px;
	width:2000px;
	position:absolute;
}
#line::before {
	right: 100%;
}
#line::after { 
	left: 100%;
}

#moving {
	height: 0px;
    width: 100%;
    background: blue;
    transition: 2s height;
    position: absolute;
    top: 0px;
    z-index: -1;
}
body{
	background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
	<div id="circle"></div>
	<div id="line"></div> 
    <div id="circle"></div>
    <div id="moving"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

dgk*_*nca 6

我们可以用radial-gradient和 来做到这一点mask。对于单个 div，没有伪元素。

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  /* this is flexible. you can change */
  --circle-radius: 100px;
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="a"></div>
Run Code Online (Sandbox Code Playgroud)

圆半径也可以是百分比值：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 30px;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 20%; /* changed as percent value */
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: rgba(0, 0, 0, .8);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="a"></div>
Run Code Online (Sandbox Code Playgroud)

另一个想法：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), transparent calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="a"></div>
Run Code Online (Sandbox Code Playgroud)

撤销：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-image: url(https://picsum.photos/id/1060/720/1280);
  background-size: cover;
}

.a {
  --circle-radius: 100px;
  --border-width: 30px;
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, #000 var(--circle-radius), transparent calc(var(--circle-radius) + 2px) calc(var(--circle-radius) + 2px + var(--border-width)), #000 calc(var(--circle-radius) + 2px + var(--border-width) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: #000;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="a"></div>
Run Code Online (Sandbox Code Playgroud)

And*_*rew 5

关于"Pius Nyakoojo"中的"方法1",稍作改进(见下文)就可以了.我个人认为这是最简单的解决方案:

截图

<html>
<!-- Assuming the stuff to mask is a 100 pixel square -->
<style>
.mask {
    position: absolute;
    top: -50px;                     /* minus half the div size */
    left: -50px;                    /* minus half the div size */
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    background-color: transparent;
    border-radius: 100px;           /* the div size */
    border: 50px solid white;       /* half the div size */
    pointer-events: none;           /* send mouse events beneath this layer */
}

.stuff {
    position: absolute;
    width: 100px;                   /* the div size */
    height: 100px;                  /* the div size */
    overflow: hidden;               /* hide the excess of the mask border */
    background-color: #CCC;
}
</style>
<body>
    <div class="stuff">
        <div class="mask"></div>
        blah blah blah blah blah
        blah blah blah blah blah
        blah blah blah blah blah
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

35481 次

最近记录：

5 年，9 月 前
相关归档
如何在bootstrap模式对话框中仅为模态体添加滚动条 141
我应该对伪元素使用单冒号还是双冒号？ 107
将CSS应用于html,body和通用选择器*有什么区别？ 27
风格每三个元素？ 20
样式Bootstrap的btn-group-justified,添加边距和垂直大小 13
WordPress中的自定义svg管理菜单图标 11
如何在另一个使用弹性盒的底部对齐div？ 3
用于多个元素的CSS-Selector 2
用不同的颜色,图象和形状的背景 2
无需 CSS 即可设置轴的样式 2
难疑归档
C++中指针变量和引用变量之间有什么区别？ 3115
如何在Windows上安装pip？ 2469
使用Git下载特定标签 1892
在Python中获取列表的最后一个元素 1871
如何按字典值对字典列表进行排序？ 1722
什么是JavaBean？ 1677
C#中两个问号共同意味着什么？ 1540
Subversion存储库中"分支","标记"和"主干"的含义是什么？ 1181
git:撤消所有工作目录更改,包括新文件 1108
如何在同一分支上的两个不同提交之间区分相同的文件？ 1077