[分享]css3折射

CSS3折射是CSS3的一个新特性，它可以让元素在被渲染时产生一个类似玻璃的效果，让图像看起来非常立体逼真，更有层次感。 在CSS3中，开发者可以通过使用webkitboxreflect属性来实现折叠...

CSS3折射是CSS3的一个新特性，它可以让元素在被渲染时产生一个类似玻璃的效果，让图像看起来非常立体逼真，更有层次感。 在CSS3中，开发者可以通过使用-webkit-box-reflect属性来实现折叠效果，并进一步细化折射的表现形式。

.box{
  width: 300px;
  height: 300px;
  background: url("image.png");
  -webkit-box-reflect: below  //折射方向为下
                      inset 0 //实现完全反射
                      hsla(0, 0%, 100%, 0.3); //用白色半透明代替完美反射
}

在此代码中，box元素是一个300*300的背景图像块，并实现了下方的折射效果。 inset 0参数表示图像在镜面上完美反射，而hsla(0, 0%, 100%, 0.3)则用白色半透明代替了完美反射，在镜面前方添加了一个具有层次感的阴影效果，这让图像看上去更逼真，更立体。

CSS3折射能够使用在很多场景中，比如创建类似水滴形状的效果，或者创建一个类似宝石的正面和背面，让图像看起来更加真实。

总的来说，CSS3的折射特性为web开发人员增加了另一个视觉增强工具，如果能够巧妙的运用它，那么页面的效果将更加漂亮、逼真。