扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家介绍CSS3中怎么利用box-reflect属性设置文字倒影效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、托管服务器、等保安全、私有云建设等企业级互联网基础服务，联系热线：18982081108
语法：
CSS Code复制内容到剪贴板
box-reflect：none |
默认值：none
适用于：所有元素
继承性：无
取值：
none：无倒影
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
none：无遮罩图像
如果你需要一个简单倒影，你可以这样做：
代码
CSS Code复制内容到剪贴板
box-reflect: below;
效果
注意设置倒影元素的padding是会影响倒影位置的
代码
CSS Code复制内容到剪贴板
box-reflect: below 10px;
效果
代码
CSS Code复制内容到剪贴板
box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
效果
关于CSS3中怎么利用box-reflect属性设置文字倒影效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网