[分享]css3文字倒影属性

CSS3的文字倒影属性可以实现文字在水平方向的镜像反射，为网页设计带来了更多的创意和变化。在以下示例中，我们将展示如何使用CSS3的文字倒影属性来制作下划线效果。h1 { color: 333; te...

CSS3的文字倒影属性可以实现文字在水平方向的镜像反射，为网页设计带来了更多的创意和变化。在以下示例中，我们将展示如何使用CSS3的文字倒影属性来制作下划线效果。

h1 {
    color: #333;
    text-shadow: 1px 1px #fff;
    /* 阴影效果 */
}

h1:after {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    /* 添加下划线效果，z-index值必须小于h1元素的z-index值 */
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2));
    /* 用渐变色设置下划线样式 */
    transform: scaleY(-1);
    /* 将下划线反转 */
    opacity: 0.5;
    /* 设置不透明度 */
} 

以上代码可以为任何一个h1元素添加下划线效果，只需要将代码复制粘贴到相应的CSS文件中即可。

CSS3的文字倒影属性还可以实现文字在竖直方向的倒影，只需要将上述代码中的transform属性修改为：

transform: scaleX(-1); 

即可实现竖直方向的倒影效果。这样的效果可以为网页设计带来更多的变化和创意，提高用户的体验感。