首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >可以使用css创建这个椭圆阴影吗?

可以使用css创建这个椭圆阴影吗?
EN

Stack Overflow用户
提问于 2014-08-03 14:49:10
回答 2查看 3.1K关注 0票数 7

我想知道是否有可能在使用was时创建如下阴影。我尝试添加box-shadow,但它将阴影添加到box中,而不是如下图所示。我也尝试过使用伪元素,但没有找到任何方法来使其变为椭圆形。我想知道这是否可能使用CSS或我只是必须使用阴影的透明图像。

EN

Stack Overflow用户

发布于 2014-08-03 15:00:02

这是我刚刚制作的类似于阴影部分的东西。如果你想让它在非webkit上工作,你需要为其他浏览器添加规则。基本思想是使用边界半径创建一个圆,然后使用缩放在y方向上收缩它,最后对它进行模糊处理。

http://jsfiddle.net/L4QDs/1/

代码语言:javascript
运行
复制
#shadow {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.5;
    -webkit-filter: blur(10px);
    -webkit-transform: scale(1, 0.2);
}

票数 8
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25102367

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档