icss之继承inherit

学习自link
目标为图片添加倒影

1、div{ -webkit-box-reflect: below; }
box-reflect 有四个方向可以选，below | above | left | right 代表下上左右。
2、继承inherit

div::after {content: "";position: absolute;top: 100%;left: 0;right: 0;bottom: -100%;background-image: inherit;transform: rotateX(180deg);;
}

div {margin: 50px auto;width: 200px;height: 200px;background-image: url('http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg');position: relative;
}div:before {content: "";background-image: inherit;position: absolute;top: 100%;left: 0;right: 0;bottom: -100%;transform: rotateX(180deg);
}

我们使用伪元素 background-image: inherit; 继承父元素的背景图，再使用 transform 旋转容器达到反射的效果。

icss之继承inherit相关推荐

Java基础篇--继承(inherit),多态(Polymorphism)
Java基础篇--继承(inherit),多态(Polymorphism) 1. 继承概述 1.1 什么是继承 1.2 为什么要使用继承 1.3 继承的特点 1.4 继承的优点 2. 组合设计模式 2 ...
html css inherit,CSS 继承 inherit属性的方法
给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化, div 大小怎么变化,我们都不用去改我们的代码. 法一:-webkit ...
CSS 样式继承 inherit 属性
inherit 属性在CSS中,子元素会继承了父元素的一些样式属性.能够继承到子类的样式属性非常有限,仅是文字.字体.颜色... 子类如果还想继承父类的属性,可以通过inherit 强制继承. 通 ...
继承 inherit
C++自学精简教程目录(必读) 继承继承是代码复用的一种形式. 继承可以得到父类的成员变量和成员函数. #include <iostream> using namespace std; ...
CSS 样式的 initial（默认）和 inherit（继承）以及 unset
经常会碰到,问一个 CSS 属性,例如 position 有多少取值. 通常的回答是 static.relative.absolute 和 fixed .当然,还有一个极少人了解的 sticky .其 ...
C#编程语言与面向对象——继承
现实生活中的事物都归属于一定的类别,比如,狮子是一种(IS_A)动物,为了在计算机中模拟这种关系,面向对象的语言引入了继承(inherit)特性. 构成继承关系的两个类中,Animal称为父类(par ...
在java面向对象编程中_谈一谈你对封装_继承_多态概念的理解_Java新职篇：面向对象编程的3个原则是什么？...
原标题:Java新职篇:面向对象编程的3个原则是什么? 所有面向对象的编程语言都提供帮助你实现面向对象模型的机制,这些机制是封装,继承及多态性.现在让我们来看一下它们的概念. 封装封装(Encaps ...
谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
学习NodeJS第五天：JavaScript的继承
人们接触 JavaScript,都被他单纯的外表给骗了,殊不知,一下子又 Functional Programming 又 Object Oriented 又前台又跑到后台,活蹦乱跳.一旦你遇到某些 ...

icss之继承inherit

icss之继承inherit相关推荐

最新文章

热门文章