CSS3的一些理解，附上自制CSS3思维导图

古城微笑少年丶 2022-03-01 13:20 153阅读 0赞

CSS3相比与CSS有很多的实用新特征增加。  
例如CSS3新增的**基本选择器**（子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器）。群组选择器的出现，大大的降低了选择器出现相同代码的代码量。  
**边款与圆角**的效果，让我们的页面看起来也变得那么圆滑了起来。  
**多背景图**，以及**渐变的效果**使我们的页面看起来，更加的有层次感。  
**transform2D以及3D的转换**，让我们图片真正能够动起来——  
CSS3 rotate()旋转  
CSS3 translate()平移  
CSS3 scale()缩放  
CSS3 skew()扭曲或斜切  
**CSS动画**animation属性，实现了一些以前需要靠JavaScript才能实现的动画效果。  
还有一些包括图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、使用@Font-Face实现定制字体、多栏布局、媒体查询等。

下列效果已经完全能够靠CSS3代码实现——

![20190322170746822.gif][]

![20190322171154258.gif][]

接下来，就是我自制的CSS3基础的思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70][]

[20190322170746822.gif]: /images/20220301/45f971c54d0b4ee5bec22b5367d441b4.png
[20190322171154258.gif]: /images/20220301/0673005ee5d6459c8d9b8b148dc5fccb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70]: /images/20220301/509e5600fe994883bae83ec78b029e64.png

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 python3-思维导图

[c248047906c19cd7a5ebba7c782eff3542a.jpg][] 转载于:https://my.oschina.net/wangyunlong/b...

小鱼儿/ 2024年04月18日 15:00/ 0 赞/ 4 阅读

相关 CSS学习 | 思维导图

CSS样式 ![20160804003702574][] [20160804003702574]: /images/20220719/e1929acab2514

秒速五厘米/ 2022年09月25日 00:28/ 0 赞/ 160 阅读

相关 css3理解

接触完css3的3D变换，感觉确实十分华丽，趁着热乎劲，把感想和理解记录下来。如有不对，欢迎指正。 CSS3中提供了2D和3D两种变换方式，所谓的变换主要就是位移和旋转，2D

柔情只为你懂/ 2022年06月17日 07:48/ 0 赞/ 120 阅读

相关超详细CSS思维导图，自制

CSS思维导图这是自写的CSS思维导图，主要是还是留着自己有时候有些忘记的东西，就可以在上面查找一下。上面写的也是比较基础的CSS知识，相信以后也一定会用得上的。今天还

痛定思痛。/ 2022年03月12日 01:29/ 0 赞/ 458 阅读

相关自制HTML5基础思维导图

这次这个写得比较简单，如图所示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

r囧r小猫/ 2022年03月02日 01:35/ 0 赞/ 163 阅读

相关 CSS3的一些理解，附上自制CSS3思维导图

CSS3相比与CSS有很多的实用新特征增加。例如CSS3新增的基本选择器（子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器）。群组选择器的出现，大大的降低了选

古城微笑少年丶/ 2022年03月01日 13:20/ 0 赞/ 154 阅读

相关 CSS选择器总结思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0Y2F0

阳光穿透心脏的1/2处/ 2021年12月12日 15:33/ 0 赞/ 316 阅读

相关 HTML-CSS 知识点思维导图（一）

![在这里插入图片描述][20191022180444693.png] 标签 ![在这里插入图片描述][20191022180612835.png] 表格 ![

素颜马尾好姑娘i/ 2021年07月04日 18:52/ 0 赞/ 436 阅读

相关 CSS思维导图

![在这里插入图片描述][20191018180752269.png] ![在这里插入图片描述][20191018180811949.png] ![在这里插入图片描述]

「爱情、让人受尽委屈。」/ 2021年07月04日 15:49/ 0 赞/ 357 阅读

相关 HTML,CSS,JavaScript的思维导图

一个思维导图是把抽象的事物具体化，以一个东西为思想核心内容，映射出一系列的组成及作用影响的内容。 HTML的思维导图 `HTML`是一种超文本标记语言。我认为要学习一

以你之姓@/ 2021年07月04日 13:34/ 0 赞/ 990 阅读