css 胶囊 两种颜色_你所不知道的CSS小知识

CSS是 Cascading Style Sheet 的缩写，翻译过来就是“层叠样式表”，CSS用来定义HTML的显示样式，用于设计网页的外观效果，通过使用CSS来实现页面的内容与表现形式分离，可以很大程度的提高工作效率。

HTML网页就像是没有经过装修的毛坯房，而HTML+CSS的网页就像是精装修后的房子

CSS3是CSS中的最新版本，也就是说还有其他的CSS版本，例如CSS2.1，相对于2.1来讲，CSS3增加了很多强大的新功能，可以帮助开发人员解决实际问题，非常实用。

CSS3继承了CSS2.1的部分内容，并且在其基础上进行了很多的添加和修改。CSS3的新特性非常多，这里简单列举被浏览器支持的使用特性。

1. 完善选择器

   在2.1的基础上进行改进，它可以在标签中指定特定的HTML元素，而不必使用多余的类、ID或者js脚本。如果想要设计轻量级的网页，并且希望标签更好的分离，高级选择器是非常有用的。它可以减少在标签中添加大量class和id属性的数量，并让开发人员更方便的维护样式表。

2. 完善视觉效果

   网页中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。在之前的CSS中需要用到js或者设计师制作图片来去实现效果，而在CSS3中可以使用一些新特性去实现这些效果。

3. 完善盒子模型

   盒子模型在CSS中是非常重要的，CSS2中的盒模型只能实现一些基本的功能，对一些特殊的实现效果，需要借助js来实现。而CSS3中改善了这一点，我们可以直接使用CSS3中的新属性来去实现。

4. 增加弹性盒模型布局

   弹性盒模型布局(Flexible Box Layout)能让块在水平、垂直方向对齐，能让块自适应屏幕大小，相比较于浮动、定位布局来说，它显得更加方便灵活，但是在一些浏览器中还不被支持。

5. 增强颜色和透明度功能

   CSS3颜色属性的引入，使用户在使用时，不在局限于RGB和十六进制这两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色 模式。在设计网页的时候，能轻松实现某个颜色变亮或者变暗。

6. 增加圆角和边框功能

   在CSS3中使用圆角不需要添加任何标签和图片，也不需要借助js脚本，一个属性就可以实现。

7. 完善媒体特性

   媒体特性可以实现一种响应式布局，使布局可以根据用户的设备选择对应的样式显示出来，从而达到在不同分辨率或设备下具有不同效果显示的目的。

讲到这里，CSS3的概述我们已经接近了尾声，如果有感兴趣的朋友，欢迎加入我们！