本文使用纯CSS代码给图片加倒影，CSS代码 ：
img {
-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}
效果如下图所示：
完整代码：
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3614.html
赞 (0)
微信扫一扫 
支付宝扫一扫
Less编写及使用快速入门
上一篇
2019年7月17日 上午9:35
SyntaxError: Non-UTF-8 code starting with ‘xc1′,’xc4′,’xc7’,解决方法
下一篇
2019年8月23日 上午10:21
99%的人还看了以下文章
-
“注册”按钮(图片)怎么跳转到注册页面？
页面代码： <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面？ <inpu…
-
如何为需要打印的网页设置单独的css样式
项目开发：同一个页面，需要在浏览器中浏览是一种样式，而当要打印这个页面时候，又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用： <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…
-
css布局基础：定位综合练习
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图： 效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…
-
跟永哥学HTML5（3）：HTML5新增语义化元素的使用
上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…
-
第8课：组织元素（span和div）
pan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本…
-
CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果
box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after，我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…
