从倒影说起,谈谈 CSS 继承 inherit(转)
从倒影说起,谈谈 CSS 继承 inherit
给定一张有如下背景图的 div:
制作如下的倒影效果:
方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div
大小怎么变化,我们都不用去改我们的代码。
法一:-webkit-box-reflect
这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:
基本上是只有 -webkit- 内核的浏览器才支持。
不过使用起来真的是方便,解题如下:
1
2
3
|
div{ -webkit-box-reflect: below ; } |
box-reflect
有四个方向可以选,below | above | left | right
代表下上左右,更具体的可以看看 MDN 。
法二:inherit,使用继承
本题主要还是为了介绍这种方法,兼容性好。
inherit
是啥,每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
灵活使用 inherit
继承父值,可以解决许多看似复杂的问题。对于本题,我们对图片容器添加一个伪元素,使用 background-image:inherit
继承父值的背景图值,就可以做到无论图片如何变,我们的 CSS 代码都无需改动:
1
2
3
4
5
6
7
8
9
10
|
div:before { content : "" ; position : absolute ; top : 100% ; left : 0 ; right : 0 ; bottom : -100% ; background-image : inherit; transform: rotateX( 180 deg);; } |
我们使用伪元素 background-image: inherit;
继承父元素的背景图,再使用 transform 旋转容器达到反射的效果。
说到底,CSS 属性的取值就是由默认值(initial),继承(inherit)与加权系统构成的(其实还有
unset(未设置)
、revert(还原)
),厘清它们的关系及使用方法对熟练使用 CSS 大有裨益。
转自 http://www.cnblogs.com/coco1s/p/5908120.html
从倒影说起,谈谈 CSS 继承 inherit(转)的更多相关文章
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目-- 从倒影说起,谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...
- CSS继承inherit | elementUI NavMenu vertical竖版 加 A标记 外联 不能继承上层color,需要手写下color:inherit;
<li data-v-576b9cf5="" role="menuitem" tabindex="0" class="el- ...
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS继承总结
CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...
- css继承样式怎么控制?用选择器
css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...
- CSS继承元素属性
CSS继承的元素属性 所有元素可继承: visibility和cursor 内联元素和块级元素可继承: letter-spacing.word-spacing.white-space.line-hei ...
- CSS继承—深入剖析
CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明.而需要要指定为其它样式的部份设定在个别元素里即可达到效果.这项特性可以给网页 ...
随机推荐
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- Ubuntu16.04安装Screenlets
通过添加软件源的方式安装装 sudo add-apt-repository ppa:screenlets/ppa sudo apt-get update sudo apt-get install sc ...
- erlang 在线生成crashdump
一般说来抓dump 4种 方式: 1. erlang:halt(“abort”). 2. 在erlang shell下输入CTRL C + “大写的A” 3.等着进程崩溃 ...
- UIAutomator
UI Automator Viewer The uiautomatorviewer tool provides a convenient GUI to scan and analyze the UI ...
- Requests 乱码
当使用Requests请求网页时,出现下面图片中的一些乱码,我就一脸蒙逼. 程序是这样的. def getLinks(articleUrl): headers = { "Uset-Agent ...
- JSP复习整理(五)JavaBean生命周期
一.创建一个JavaBean UserBean.java package jsp.test; public class UserBean { private String userName; priv ...
- Spring学习(一)
1.既然是学习Spring,我们首先要搞清楚Spring是什么? Spring是分层的.JavaSE/EE一站式的.轻量级的开源框架. 2.Spring的核心 百度百科:Spring是基于IOC和AO ...
- js获取网页中宽高度集合
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- 闪回查询(SELECT AS OF)
使用Flashback Query的场景包括如下: 摘自官档 Recovering lost data or undoing incorrect, committed changes. For exa ...
- 配置比对脚本(python)
# -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...