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.

box-shadowborder-radius

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%.

border-radius

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

box-shadowoffset-xoffset-yblur-radiusspread-radiusblur-radiusspread-radius

 

原始代码下的图形如下:

 

 

练习题:

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.

background-colorborder-radius

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-shadowoffset-xoffset-yblur-radiusspread-radius

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

    练习代码:

    <style>
      .center {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 25px 10px 0 0 blue;
      }
    
    </style>
    <div class="center"></div>
    <style>
      .center {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 25px 10px 0 0 blue;
      }
    
    </style>
    <div class="center"></div>


    .center {
    position: absolute;
    margin: auto;
    top:
    0;
    right:
    0;
    bottom:
    0;
    left:
    0;
    width: 100px;
    height: 100px;
    background
    color: transparent;
    border
    50;
    box
    00 blue;
    }

    classcenter

     

    效果:

     

    » 本文来自:前端开发者 » 《FCC—Create a Graphic Using CSS—新月图形_凊蒝_前端开发者》
    » 本文链接地址:https://www.rokub.com/73827.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!