>

从倒影说起,谈谈一些有趣的CSS题目

- 编辑:至尊游戏网站 -

从倒影说起,谈谈一些有趣的CSS题目

有趣的CSS标题(4): 从倒影谈起,谈谈 CSS 承继 inherit

2016/09/29 · CSS · CSS

正文小编: 伯乐在线 - chokcoco 。未经我许可,禁止转发!
应接参加伯乐在线 专栏撰稿人。

开本种类,探究一些幽默的 CSS 标题,抛开实用性来说,一些难题为了拓展一下消逝难题的思路,别的,涉及一些便于忽视的 CSS 细节。

解题不考虑包容性,标题南征北战,想到怎样说如何,若是解题中有你倍以为生僻的 CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,重要的事情说三次。

座谈一些风趣的CSS标题(1): 左边竖条的落到实处际境况势

切磋一些美不可言的CSS标题(2): 从条纹边框的落实谈盒子模型

探究一些有意思的CSS标题(3): 层叠顺序与仓库上下文知多少

具备标题汇总在自个儿的 Github 。

研商一些珠辉玉映的CSS标题(四)-- 从倒影聊到,谈谈 CSS 承袭 inherit,cssinherit

开本连串,斟酌一些风趣的 CSS 标题,抛开实用性来讲,一些主题素材为了推广一下解决难点的笔触,其他,涉及一些便于忽略的 CSS 细节。

解题不思考包容性,题目南征北战,想到什么说哪些,假使解题中有您倍认为生僻的 CSS 属性,赶紧去补习一下呢。

不断更新,不断更新,不断更新,主要的事情说三次。

座谈一些风趣的CSS标题(风流罗曼蒂克)-- 左边竖条的贯彻形式

切磋一些风趣的CSS标题(二)-- 从条纹边框的落实谈盒子模型

座谈一些美不可言的CSS标题(三)-- 层叠顺序与货仓上下文知多少

富有标题汇总在自小编的 Github 。

 

4、从倒影谈起,谈谈 CSS 承袭 inherit

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

图片 1

营造如下的倒影效果:

图片 2

主意非常多,然则大家当然要寻觅最快最便捷的办法,起码得是不管图片怎么变卦,div 大小怎么变化,大家都不用去改我们的代码。

4、从倒影聊到,谈谈 CSS 承袭 inherit

给定一张好似下背景图的 div:

图片 3

塑造如下的倒影效果:

图片 4

措施非常多,不过我们自然要物色最快最简便易行的情势,起码得是不论图片怎么变卦,div 大小怎么变卦,大家都不用去改我们的代码。

 

法一:-webkit-box-reflect

那是二个拾叁分新的 CSS 属性,使用起来优异简短,能够从各类方向反射大家内容。不过包容性过于艰难:

大概是唯有 -webkit- 内核的浏览器才支撑。

图片 5

唯独使用起来实在是方便,解题如下:

CSS

div{ -webkit-box-reflect: below; }

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

-webkit- 内核下查看德姆o

See the Pen -webkit-box-reflect by Chokcoco (@Chokcoco) on CodePen.

box-reflect 有多少个样子能够选,below | above | left | right 代表下上左右,更具体的能够看看 MDN 。

 

法一:-webkit-box-reflect

那是四个要命新的 CSS 属性,使用起来十三分简易,能够从各种方向反射大家内容。可是宽容性过于费劲:

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

图片 6

可是使用起来实乃利于,解题如下:

div{
    -webkit-box-reflect: below;
}

-webkit- 内核下查看德姆o

box-reflect 有多个样子能够选,below | above | left | right 代表下上左右,更具体的能够看看 MDN 。

 

法二:inherit,使用持续

大旨主要依旧为着介绍这种艺术,宽容性好。

inherit 是甚,每一种 CSS 属性定义的概述都提议了那些特性是暗中同意承继的 (“Inherited: Yes”) 照旧暗中同意不三回九转的 (“Inherited: no”)。这决定了当你从未为成分的习性钦定值时该怎么总计值。

灵活使用 inherit 承袭父值,能够化解多数好像复杂的主题材料。对于主旨,大家对图纸容器增多一个伪成分,使用 background-image:inherit 承继父值的背景图值,就足以完结无论图片怎么样变,大家的 CSS 代码都没有要求更动:

CSS

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

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(180deg);;
}

Demo戳我

See the Pen image reflection by { background-image: inherit } by Chokcoco (@Chokcoco) on CodePen.

咱俩采取伪成分 background-image: inherit; 承继父成分的背景图,再使用 transform 旋转容器达到反射的机能。

总归,CSS 属性的取值正是由默认值(initial)继承(inherit)加权系统构成的(其实还应该有 unset(未设置)revert(还原)),厘清它们的涉及及使用办法对纯熟运用 CSS 大有裨益。

 

不无难点汇总在自个儿的 Github ,发到博客希望获得更加多的调换。

到此本文停止,假如还应该有啥样难题依然建议,可以多多沟通,原创小说,文笔有限,四六不通,文中若有不正之处,万望告知。

打赏支持作者写出越来越多好文章,多谢!

打赏小编

法二:inherit,使用持续

主题首要还是为了介绍这种办法,包容性好。

inherit 是吗,每种 CSS 属性定义的概述都提议了那么些特性是默许承接的 ("Inherited: Yes") 依然默许不三回九转的 ("Inherited: no")。那决定了当你从未为成分的质量钦命值时该如何计算值。

灵活选取 inherit 承接父值,能够湮灭广大好像复杂的标题。对于宗旨,大家对图纸容器增多一个伪成分,使用 background-image:inherit 承接父值的背景图值,就足以做到无论图片怎么着变,大家的 CSS 代码都没有必要更改:

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

Demo戳我

 

小编们应用伪成分 background-image: inherit; 承袭父元素的背景图,再使用 transform 旋转容器到达反射的法力。

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

 

拥反常汇总在自家的 Github ,发到博客希望赢得越来越多的沟通。

到此本文结束,要是还恐怕有哪些难点仍然建议,能够多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

从倒影提及,谈谈 CSS 承接 inherit,cssinherit 开本类别,探讨一些有趣的 CSS 标题,抛开实用性来说,一些题...

打赏援助自身写出愈来愈多好小说,谢谢!

任选大器晚成种支付方式

图片 7 图片 8

2 赞 1 收藏 评论

有关作者:chokcoco

图片 9

经不住光阴似箭,逃可是此间少年。 个人主页 · 作者的稿子 · 63 ·    

图片 10

本文由门户名站发布,转载请注明来源:从倒影说起,谈谈一些有趣的CSS题目