下面是一个简单的示例,一个div设置了背景颜色和宽度,但没有设置高度,所以它无法撑起自己的身体。
·如果想要让这个div的比例保持不变,可以使用“aspect-ratio”属性。例如,我们将其设置为“5:2”,因为宽度已经设置为100%,所以它会自动计算出高度,这样这个div就能正常显示,其宽度和高度的比例为5:2。无论你如何调整窗口大小,这个div的比例都会保持不变,这对于移动端的响应式设计非常方便。
·另一个示例是一个点设置了一个背景图片,我们想要让图片产生倒影,让效果更加真实。这时可以使用“box-reflect”属性,它可以让我们在下方添加一个与原图间隔10个像素的倒影,使原图更加生动。
然而,这种倒影效果还不够真实,可以适当调整透明度,让阴影颜色从透明逐渐过渡到半透明的黑色。看一下效果,非常不错,倒影效果已经非常明显了。
本次视频到此结束,感谢大家的收看。