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;

}

css空心半圆的实现,css – 透明空心或切出圆相关推荐

css空心圆代码,透明空心或切圆圈
您可以使用两种不同的技术实现透明切割圆: 1.SVG 以下示例使用内联svg.第一个片段使用蒙版元素剪切透明圆圈,第二个空心圆圈使用路径元素.圆圈由2个弧命令组成: 使用mask元素:body{bac ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
css的三个特性背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
css怎么将样式取消,css怎么把透明样式取消
1. 禁用css之后,怎么设置透明背景你好:CSS模板已不能再使用. 现在无法再设置"鼠标特效.透明背景"等效果了,设置后无法通过审核,不会显示出来. 新浪博客于2008年1月2 ...
【CSS】PhotoShop 切图 ② ( PhotoShop 切片选择工具 | 清除切片 | 新建基于图层的切片 | 透明背景图片切图 | 根据参考线选择切片 )
文章目录一. PhotoShop 切片选择工具二.清除切片三.新建基于图层的切片四.透明背景图片切图五.根据参考线选择切片一. PhotoShop 切片选择工具如果之前使用切片工具设 ...
HTML CSS是什么？HTML CSS你了解多少？
码字不易,转载请务必注明原文出处. 不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页 --修改placeholder提示的样式: 1.除IE外通用写法类名或标签名::p ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...

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

css空心半圆的实现,css – 透明空心或切出圆相关推荐

最新文章

热门文章