一句代码给图片加倒影-CSS3

本文使用纯CSS代码给图片加倒影,CSS代码 :

img {
    -webkit-box-reflect: below 0px 
    -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}

效果如下图所示:

一句代码给图片加倒影-CSS3

完整代码:

Tips:You can change the code before run.

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%的人还看了以下文章

  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    4.7K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    30.3K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    7.9K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    7.5K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    10.9K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    3.0K0

发表回复

登录后才能评论