从倒影说起,谈谈 CSS 继承 inherit

给定一张有如下背景图的 div:

制作如下的倒影效果:

方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码。

法一:-webkit-box-reflect

这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:

基本上是只有 -webkit- 内核的浏览器才支持。

不过使用起来真的是方便,解题如下:

1
2
3
div{
    -webkit-box-reflect: below;
}

-webkit- 内核下查看Demo

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"";
    positionabsolute;
    top100%;
    left0;
    right0;
    bottom-100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

Demo戳我

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

说到底,CSS 属性的取值就是由默认值(initial)继承(inherit)加权系统构成的(其实还有 unset(未设置)revert(还原)),厘清它们的关系及使用方法对熟练使用 CSS 大有裨益。

转自 http://www.cnblogs.com/coco1s/p/5908120.html

从倒影说起,谈谈 CSS 继承 inherit(转)的更多相关文章

  1. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. 谈谈一些有趣的CSS题目-- 从倒影说起,谈谈 CSS 继承 inherit

      开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...

  3. CSS继承inherit | elementUI NavMenu vertical竖版 加 A标记 外联 不能继承上层color,需要手写下color:inherit;

    <li data-v-576b9cf5="" role="menuitem" tabindex="0" class="el- ...

  4. 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  7. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  8. CSS继承元素属性

    CSS继承的元素属性 所有元素可继承: visibility和cursor 内联元素和块级元素可继承: letter-spacing.word-spacing.white-space.line-hei ...

  9. CSS继承—深入剖析

    CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明.而需要要指定为其它样式的部份设定在个别元素里即可达到效果.这项特性可以给网页 ...

随机推荐

  1. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  2. Ubuntu16.04安装Screenlets

    通过添加软件源的方式安装装 sudo add-apt-repository ppa:screenlets/ppa sudo apt-get update sudo apt-get install sc ...

  3. erlang 在线生成crashdump

    一般说来抓dump 4种 方式:      1. erlang:halt(“abort”).      2. 在erlang shell下输入CTRL C + “大写的A”      3.等着进程崩溃 ...

  4. UIAutomator

    UI Automator Viewer The uiautomatorviewer tool provides a convenient GUI to scan and analyze the UI ...

  5. Requests 乱码

    当使用Requests请求网页时,出现下面图片中的一些乱码,我就一脸蒙逼. 程序是这样的. def getLinks(articleUrl): headers = { "Uset-Agent ...

  6. JSP复习整理(五)JavaBean生命周期

    一.创建一个JavaBean UserBean.java package jsp.test; public class UserBean { private String userName; priv ...

  7. Spring学习(一)

    1.既然是学习Spring,我们首先要搞清楚Spring是什么? Spring是分层的.JavaSE/EE一站式的.轻量级的开源框架. 2.Spring的核心 百度百科:Spring是基于IOC和AO ...

  8. js获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  9. 闪回查询(SELECT AS OF)

    使用Flashback Query的场景包括如下: 摘自官档 Recovering lost data or undoing incorrect, committed changes. For exa ...

  10. 配置比对脚本(python)

    # -*- coding: utf- -*- from datetime import * import MySQLdb import sys import time import datetime ...