css空心半圆的实现,css – 透明空心或切出圆

你可以用两种不同的技术实现一个透明的切出圆:

1.SVG

使用mask元素:

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

有一个路径元素:

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;

}

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

>较短的代码

>您可以轻松使用图像或渐变填充圆形蒙版

>保持形状的边界并且仅在相对于掩模的填充上触发鼠标事件(在示例中悬停透明的切出圆圈)

2. CSS只使用Box-SHADOWS

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

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;}

浏览器对Box-shadows的支持是IE9,见canIuse

同样的方法是使用border而不是Box-shadows。这是有趣的,如果你需要支持不支持像IE8的Box-shadows的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;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值