实际上还有很多CSS新属性并未包含进CSS3官方标准中。 -webkit-box-reflect 属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。 -webkit-box-reflect 的作用是让图片出现倒影。 如果一个图
实际上还有很多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)))}
效果：
发表评论