繁体   English   中英

带有框阴影扩散的不需要的边界半径伪影

Unwanted border-radius artefact with box-shadow spread

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

目标是一个带有软边缘的无边界圆,包含文本或其他元素。 如何去除以下示例中的细黑色边框线? 我尝试添加具有相同或透明颜色的边框。 它可以用 1px x 1px 和大的传播来完成,但我想把东西放在里面。

 body { background: black; } div { width: 50px; height: 50px; margin: 50px; padding: 50px; border-radius: 50%; background: white; box-shadow: 0 0 10px 10px white; }
 <div>some text</div>

1 个回复

radial-gradient()来做

 body { background: black; } div { width: 50px; height: 50px; margin: 50px; padding: 70px; border-radius: 50%; background: radial-gradient(farthest-side,white calc(100% - 15px),transparent ); }
 <div>some text</div>

1 CSS中的圆形边界半径伪影

我正在使用react并有一个要在屏幕上映射的圆形组件。 问题是在某些视图尺寸下,我在圆圈中出现了小瑕疵。 平端,仅在圆的某些行上。 圆的边宽为980px 击球盒 集装箱打箱 这是父组件: 球成分: 我尝试添加填充和边距,但这仅更改了单位显示的尺寸。 ...

2 边界半径倒置且带有复杂的框阴影

我正在尝试重新创建具有反边界半径和几个边界的打印卡。 我使用框阴影在矩形上处理了边框,并且用100%边框半径divs填充了倒角。 我将阴影应用到圆角上,看起来超级棒。 有什么方法可以使用圆形svgs修剪拐角,然后使用filter:drop-shadow? 不确定是否有可能。 还有更 ...

2016-12-16 02:58:04 1 430   html/ css
3 边界半径和框阴影错误

我有一个具有这种样式的 div: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0p ...

2021-03-23 17:07:59 2 56   html/ css
4 为什么框阴影/边界半径很慢

我是一名前端工程师,在寻求一些性能提示时,我总是看到有人告诉我删除一些沉重的 CSS属性,例如box-shadow , border-radius ,但是我很好奇为什么要删除这些作品? 我应该覆盖哪些材料才能理解(或概览3000英尺) ...

6 输入字段上不需要的内部框阴影

我想在input区域应用两个90度角的阴影,所以我希望阴影只在顶部和底部边框处,而不是在左右边框处。 相反,左边有一个黑暗的插入阴影,我无法摆脱(见小提琴 )。 有任何想法吗? ...

2012-11-11 13:30:00 1 4850   css/ css3
7 带定向光的阴影伪影

我有一个.glb模型,并且我正在尝试使动态阴影效果更好。 我已经尝试了所有设置并阅读了文档,但这是我所能做的最好的事情,并且我得到了令人不愉快的假象。 有可能取得更好的结果吗? 演示: http : //planetvr.shop/orchid-1.html ...

2019-01-15 22:58:13 0 50   aframe
8 OpenGL中的阴影伪影

我正在尝试渲染一个对象和两个灯光,其中一个灯光投射阴影。 一切正常,但我注意到其中有些明显的伪像,如下图所示,一些阴影似乎溢出到明亮的区域。 以下是将深度信息渲染到帧缓冲区中的着色器 在上面的着色器中,uObjMVP是从投射阴影的光线的位置查看时使用的MVP矩阵(温暖的光线 ...

10 边界半径+溢出隐藏+内部元素(进度条)使锯齿状边缘伪影

我正在尝试建立一个进度条,相当简单。 我有一个嵌在托盘内的酒吧。 托盘有overflow: hidden和border-radius设置在其上。 这是证明问题的jsFiddle 。 正如您在图像中看到的那样, 进度条左侧有一个锯齿状的神器。 看起来父进度条(深色背景)的抗锯齿 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM