字体倒影效果

字体倒影效果

文献种类：专题技术文献；
开发工具与关键技术： DW、CSS
作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 11 月 18日
我们在制作一些宣传标语时，
大多都会用到一个让字体拥有倒影的功能，
这样可以让用户体验更好的视觉效果。
在这里我们将给大家运用CSS完成字体的倒影效果，
首先我们来完成HTML部分，
创建一个class为content的div标签，
然后在里面放置一个h3标签，用于放置要实现倒影效果的字体，
把h3标签里的title属性的属性值设置为“倒影效果字体”，
具体代码如下图：

接下来是style部分，
我们先给class为content的div设置样式，
让它的clear属性的属性值设置为both，
使content的左右两侧均不允许浮动元素。
再把内边距设为60px，具体大小可根据实际要求自行调整。如图：

然后我们给h3标签设置样式，
让它的定位为相对定位，浮动设置为左浮动，透明度设置为0.7，