[分享]css3怎么给上半圆添加投影

要给上半圆添加投影，需要使用CSS3中的boxshadow属性。Boxshadow属性允许我们在元素周围创建投影效果，通过指定相对于指定元素的横向偏移量、垂直偏移量、模糊度和扩张距离来实现。 要给上半...

要给上半圆添加投影，需要使用CSS3中的box-shadow属性。Box-shadow属性允许我们在元素周围创建投影效果，通过指定相对于指定元素的横向偏移量、垂直偏移量、模糊度和扩张距离来实现。 要给上半圆添加投影，首先需要创建一个形状为上半圆的元素。可以使用border-radius属性来实现，将上边框的左右半径设置为50%即可。如下代码所示：

 .half-circle {
        width: 100px;
        height: 50px;
        border-radius: 0 0 50px 50px;
        background-color: #e1e1e1;
    } 

接下来为元素添加投影效果，可以在样式中再加入box-shadow属性来实现。如下代码所示：

 .half-circle {
        width: 100px;
        height: 50px;
        border-radius: 0 0 50px 50px;
        background-color: #e1e1e1;
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
    } 

其中，0px表示横向偏移量为0，6px表示垂直方向的偏移量为6px，10px表示模糊度为10px，rgba(0, 0, 0, 0.3)表示投影的颜色和透明度。通过这样的设置，就可以给上半圆添加投影效果了。