html 网页内容页文章标题字体CSS显示倒影效果

米米素材网

修改于 2022-06-22 17:38:08

2.9K00

代码可运行

文章被收录于专栏：站长技术站长技术

运行总次数：0

代码可运行

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

如果一个内容页文章标题字体，米米素材网小编想要给其字体增加倒影，做法如下：

html：

<h1 class="entry-title page-title">如何使用CSS将正方形图片显示为圆形图片布局</h1>

css样式：

.single-title .page-title{margin-top:10px;border-left:5px solid #5db8f8;margin-left:-1px;color:#666;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;height:45px;line-height:34px;font-size:22px;font-weight:400;-webkit-box-reflect:below -37px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(10%,transparent),to(hsla(0,0%,100%,.3)))}

　　效果：