CSS3 使用半圆透明的效果让页面设计变得更加丰富多彩。半圆透明是指半个圆形的区域能够在一定的透明度下呈现背景色或图片。这种效果通常应用在页面中的头部或底部,能够增强页面的美观度和视觉效果。
代码示例: /* 半圆透明效果 */ .shape { position: relative; height: 200px; width: 200px; margin: 0 auto; background: #f2f2f2; } .shape:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; border-radius: 0 0 50% 50%; background: rgba(242,242,0.8); transform-origin: bottom center; transform: scaleX(1) scaleY(5) translateY(50%); }
在上面的代码示例中,通过使用:before 伪类来实现半圆透明效果。其中 shape 类用于定义半圆的大小和背景色,,:before 用于定义半圆的透明度、位置和大小。利用滤镜属性 opacity 将半圆的透明度调整为 0.8,同时通过 transform 属性调整半圆在 Y 轴方向的位置和大小,最终实现半圆透明效果。