我正在尝试创建一个这样的按钮:
我不知道如何在按钮顶部创建一个浅月亮形状。
这仍然很遥远:Fiddle Demo。
mb_convert_variables('utf-8', 'original encode', array/object)
答案 0 :(得分:11)
只需要一点inset
,您就可以在对象顶部设置阴影样式。
E.g。 Crescent shape
而且,This是您想要的按钮。
.moon {
background-color: #222;
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid #222;
/* I set 2 shadows where the first one doesn't have blur and spread for firefox fix. */
box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
-moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
}
<div class="moon"></div>
答案 1 :(得分:5)
虽然objc/objc-runtime.h
方法很好,但它不能像在提供的图像中那样在月球上产生椭圆形切割。切口是圆形的,并且具有与容器圆相同的半径。
如果需要椭圆形切割,那么我们可以使用伪元素(或)径向渐变。
使用伪元素:
box-shadow
.moon {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
border: 3px solid rgb(29, 27, 28); /*this can sometimes create a background bleed */
background: rgb(161, 159, 160);
background-clip: content-box; /* to prevent the background bleed */
box-shadow: inset 0px 0px 0px 1px rgb(29,27,28); /* to prevent the background bleed */
overflow: hidden;
}
.moon:after {
position: absolute;
content: '';
height: 100%;
width: 120%;
top: 40%;
left: -12.5%;
background: rgb(35, 31, 32);
border-radius: 60%/50%;
}
body {
background: rgb(7, 5, 6);
}
使用径向渐变:
<div class='moon'></div>
.moon{
height: 50px;
width: 50px;
background: radial-gradient(ellipse farthest-corner at 33% 100%, rgb(35, 31, 32) 45%, rgb(161, 159, 160) 47%);
background-size: 150% 100%;
border: 3px solid rgb(29, 27, 28);
border-radius: 50%;
}
body {
background: rgb(7, 5, 6);
}
答案 2 :(得分:4)
这是一个使用线性渐变的svg解决方案 添加了箭头,因为它看起来更像是一个按钮:D
#play {
fill: white;
}
#Play:hover {
stroke: firebrick;
stroke-width: 2;
}
<h1>Svg solution</h1>
<svg viewBox="0 0 100 100" width="75px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="0" x2="0" y1="0" y2="1" id="LinearGradient1">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="50%" stop-color="black" stop-opacity="1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#LinearGradient1)" stroke="black" stroke-width="5"></circle>
<polygon id="Play" points="40,30 40,70 70,50 40,30" fill="white" />
</svg>