时间:2021-05-08
clip-path的使用
polygon
circle
ellipse
inset
值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
round前面的数值,表示的是距离,如果第一个值为25%,则表示图像在上面从25%开始绘制。
body { background-color: #000;}.fa { border: 1px solid #fff; color: yellowgreen; padding: 10px; margin: 10px;}.fa>div { width: 110px; height: 110px; background-color: yellowgreen; margin: 20px auto;}.inset1 { clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)}.inset2 { clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)}.inset3 { clip-path: inset(25% 25% 0% 0% round 0% 25% 0% 25%)}<div class="fa"> <p>inset</p> <p>值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)</p> <p>round前面的数值,表示的是距离,如果第一个值为25%,则表示图像在上面从25%开始绘制</p> <div class="inset1"></div> <div class="inset2"></div> <div class="inset3"></div></div>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS中的clip-path能够让你指定一个网页元素的显示区域,而不是缺省的显示全部。CSSCode复制内容到剪贴板.clip-me{/*已被标志为不推荐使用的
那么有人就问了,什么CSS做的效果既奇妙又实用的呢?Clip,对,就是css里的clip属性,被多数人忽略的属性:语法:clip:auto|rect(numbe
text-overflow CSS中编写如下:.test_demo_clip{text-overflow:clip;overflow:hidden;whi
困惑在哪里?background-clip与background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、p
进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下:一:css2属性clip实现网页进度条;在实现之前,我们先来介绍一下clip属性,因为这