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: 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>
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/116170.html
標籤：Html/Css
上一篇：FCC---Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
下一篇：FCC---Create a More Complex Shape Using CSS and HTML---一個粉色愛心