FCC---Create a Graphic Using CSS---新月图形

By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape.

For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners.

You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.

In order to create a round object, the border-radius property should be set to a value of 50%.

You may recall from an earlier challenge that the box-shadow property takes values for offset-x, offset-y, blur-radius, spread-radius and a color value in that order. The blur-radius and spread-radius values are optional.

原始代码下的图形如下：

练习题：

Manipulate the square element in the editor to create the moon shape.

First, change the background-color to transparent, then set the border-radius property to 50% to make the circular shape.

Finally, change the box-shadow property to set the offset-x to 25px, the offset-y to 10px, blur-radius to 0, spread-radius to 0, and color to blue.

先把蓝色的背景调成透明
再调整后面绿色box-shadow阴影的边界半径，到50%
最后是微调box-shadow，之前做过关于这个的练习，做过我都已经忘记了，所以自己调了下不同值的看了下效果。基本就是把新月的颜色从绿色改到蓝色，边缘模糊的变锐化了，以后遇到再细看吧

练习代码：

<style>

  .center {

    position: absolute;

    margin: auto;

    top: ;

    right: ;

    bottom: ;

    left: ;

    width: 100px;

    height: 100px;

    background-color: transparent;

    border-radius: %;

    box-shadow: 25px 10px   blue;

  }

</style>

<div class="center"></div>

效果：

巴特西

FCC---Create a Graphic Using CSS---新月图形

最新文章

热门文章