gpt4 book ai didi

css - 如何在圆圈内实现特定的阴影效果

转载 作者:行者123 更新时间:2023-11-28 12:08:38 25 4
gpt4 key购买 nike

我想要这样的东西,但不幸的是无法获得这种阴影效果任何帮助都会很棒

    .circle{
width:50px;
height:50px;
border-radius:50%;
background-color :yellow;
display:flex;
align-items:center;
justify-content:center;
}
.inner_img{

}

我想要这样的东西:

enter image description here

这是附加的 fiddle 文件 http://jsfiddle.net/3u0mxjqq/188/

最佳答案

我尝试使用 text-shadow: rgb(39, 118, 152) -1px 1px 复制相同的效果。检查这个fiddle

.inner_img {
color: white;
font-size: 22px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(59, 175, 228);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-shadow: rgb(39, 118, 152) -1px 1px, rgb(39, 118, 152) -2px 2px, rgb(39, 118, 152) -3px 3px, rgb(39, 118, 152) -4px 4px, rgb(39, 118, 152) -5px 5px, rgb(39, 118, 152) -6px 6px, rgb(39, 118, 152) -7px 7px, rgb(39, 118, 152) -8px 8px, rgb(39, 118, 152) -9px 9px, rgb(39, 118, 152) -10px 10px, rgb(39, 118, 152) -11px 11px, rgb(39, 118, 152) -12px 12px, rgb(39, 118, 152) -13px 13px, rgb(39, 118, 152) -14px 14px, rgb(39, 118, 152) -15px 15px, rgb(39, 118, 152) -16px 16px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icon">
<div class="inner_img">
<i class="fa fa-search"></i>
</div>
</div>
</div>

关于css - 如何在圆圈内实现特定的阴影效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36355354/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com