CSS3的点滴

淩亂°似流年 2022-05-24 02:50 168阅读 0赞

### CSS3的点滴 ###

#### 1、CSS3给前端带来了什么？（CSS3特性） ####

>  *  过去：我们要么押注用户愿意为优雅漂亮的设计多等点时间（顺便说一句，用户不愿意）， 要么为了可用性而抛弃图片，牺牲设计理念。
>  *  现在：CSS3 让我们可以在很多方面不必再妥协和 牺牲。仅需要几行代码（而且不用图片），CSS3就可以创造出各种效果：圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片（当然，这个效果确实需要图片）。甚至我们之前需要依赖 JavaScript的一些基本交互效果如悬停动画，也 可以使用纯 CSS3 来实现。
>  *  通过设置CSS3效果，不用在依赖于图片，减少了http的请求数量，从而使得网页加载更加快捷，性能上面有所提升。
> 
> 甚至我们之前需要依赖 JavaScript的一些基本交互效果如悬停动画，也 可以使用纯 CSS3 来实现。

#### 2、私有前缀及其用法 ####

> 在 CSS3模块标准尚未被 W3C批准或者标准所提议的特性尚未被浏览器完全实现时，浏 览器厂商会使用所谓的私有前缀来测试“试验性的”CSS 特性。
> 
>     .round{ -khtml-border-radius: 10px; /* Konqueror */ -rim-border-radius: 10px; /* RIM */ -ms-border-radius: 10px; /* Microsoft */ -o-border-radius: 10px; /* Opera */ -moz-border-radius: 10px; /* Mozilla (如 Firefox) */ -webkit-border-radius: 10px; /* Webkit (如 Safari 和 Chrome) */ border-radius: 10px; /* W3C */ }
> 
> CSS的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略 其无法识别的属性。 此外，样式表中后出现的属性优先级高于之前出现的同名属性。正是由于这种层叠，我 们就可以先列出私有前属性，后使用无前的属性来修正，以确保当该特性被完全实现时，浏览器会运行正确的效果，而不是之前的特定浏览器的试验性效果。

#### 3、快速而有效的CSS技巧 ####

##### 3.1、CSS3多栏布局（column-width、column-count、column-gap、column-rule） #####

> CSS3出现之前，你必须将内容拆分到不 同的标签中，然后分别设定样式。CSS3可以让我们将一段或者多段内容分不到多列网格中。
> 
>     <style> #main { column-width: 12em; } </style>
>     <div id="main" role="main">    
>         <p>lloremipsimLoremipsum dolor sit amet, consectetur     // 任意文字 // </p>          <p>lloremipsimLoremipsum dolor sit amet, consectetur     // 任意文字 // </p> 
>     </div>
> 
> 可以通过设定具体栏位宽度（如 12em）或者栏位数量（如 3）来使内容分布在多列网 格中，如上面代码中，main指定的栏位宽度为12em，无论视口尺寸是多少，内容都会分布在宽度为 12em的栏位中。视口尺 寸发生变化之后，浏览器会自动调整栏位数量。
> 
> 如果想保持栏位数量不变而让栏位宽度根据视口自动调整，可以参考如下代码：
> 
>     #main { column-count: 4; }
> 
> 应用上述代码以后，内容将被分为4列，屏幕宽度发生变化，列数也不会发生变化，只是会自动调整列的宽度。
> 
> **增加栏位间隙和分割线**
> 
> 增加栏位之间的间隙可以使用column-gap属性：
> 
>     #main{ column-gap:2em}
> 
> 增加栏位之间的分割线可以使用column-rule属性：
> 
>     #main{ column-rule:thin dotted #999}
> 
> 需要给多列布局声明使用私有前，以确保兼容广泛的浏览器。
> 
> ##### 文字换行(word-wrap) #####
> 
> 要想文字不会超出容器的范围，使用word-wrap属性，有两个可用值，第一个是normal只在允许的断字点换行（浏览器保持默认处理）,第二个break-word，是在长单词或者长的url内部进行换行。
> 
>     #xxx{ word-wrap:break-word}
> 
> 给外层的包裹元素追加该声明后，超长的文字将会出现换行。

#### 4、CSS3新增的选择器及其用法 ####

##### 4.1、CSS3 的子字符串匹配属性选择器 #####

> CSS3允许我们基于属性选择器的子字符串来选择元素，换句话说，现在我们可以根据属性的部分内容来选择元素。三种匹配模式分别是：
> 
>  *  以特定前缀开头
>  *  包含特定字符串
>  *  以特定后缀结尾
> 
> 具体用法：
> 
>  *  特定前缀开头
>     
>     Element\[attribute^=”value”\]
>     
>     例如选择网站中所有alt属性值以film开头的图片
>     
>         img[alt^="film"]{ border:1px solid red; }
>     
>     该选择器的关键字符是^符号，它的意思是“以此开头”。
>  *  包含特定字符串
>     
>     Element\[attribute\*=”film”\]
>     
>     选择网站中所有 alt 属性值中包含 film 字符串的图片
>     
>         img[alt*="film"]{ border:1px solid red; }
>     
>     该选择器的关键字符是\*符号，它的意思是“包含”。
>  *  以特定后缀结尾
>     
>     Element\[attribute$=”value”\]
>     
>     选择网站中所有 alt 属性值以 film 结尾的图片
>     
>         img[alt$="film"]{ border:1px solid red; }
>     
>     该选择器的关键字符是$，它的意思是“以此结尾”。
>     
>     HTML5 中的 ID 值可以用数字开头 ,HTML 4.01是认为 ID 值以数字开头是无效的。

##### 4.2、CSS3 结构伪类 #####

> CSS3的计数方式和jQuery不太一样，jQuery计数是从0开始，而CSS3是从1开始。
> 
> CSS2.1已经有一个针对列表第一项的选择器： :first-child
> 
> CSS3又增加了一个选择器用以匹配后一项： :last-child
> 
>  *  :first-child
>  *  :last-child
>  *  :nth-child、nth-last-child、nth-of-type、nth-last-of-type
>     
>     在下面这些伪类中除了使用odd和even参数以外，还可以使用表达式，例如:first-child(2n+2)
>     
>     child和last-child的区别是，last-child是从文档节点树的末尾开始计算。
>     
>     nth-last-child(-n+3)就是从倒数第三个元素开始，向后选择之后的所有元素。
>     
>     数值表达式中也可以使用负数，例如:nth-child(3n-2)，表示从倒数第二个元素开始，然后每3个元素选择一个。
>     
>     :nth-last-of-type 则可以指定你想选择的元素类型。
>  *  :not
>     
>     否定伪类选择器，用于选择不满足某些条件的元素，下面的代码就是选择不包含类internal的li元素
>     
>         nav ul li:not(.internal) a{ color:red; }

##### 4.3、对伪元素的修正 #####

> CSS2就已经有了伪类元素，例如p:first-line会选中\\

#### 5、自定义网页字体 ####

> @fount-face规则，@font-face 规则在 CSS2中已经存在（但随后在 CSS 2.1中被删除）。@font-face 已经被重新引入 CSS3 字体模块。
> 
> **使用@font-face 嵌入网页字体**
> 
> 从 Font Squirrel上下 载的@font-face 包是一个 ZIP文件，里面包含该字体各种格式的文件（WOFF、TTF、 EOT 和 SVG），以及一个用来演示字体调用规则的 stylesheet.css 文件。
> 
> 使用 Bebas Neue字体的规则如下：
> 
>     @font-face{ font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded- opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }
> 
> 和浏览器私有前的原理类似，浏览器会根据自身特性应用列表中能识别的样式，忽略 无法识别的样式。用这种方法能保证无论什么浏览器都有一个可用字体。
> 
> 接下来就是给相关样式设置正确的字体和粗细（如果需要）。
> 
>     nav ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: 'BebasNeueRegular'; font-size: 1.875em; /*30 ÷ 16 */ color: black; }

#### 6、新的CSS3颜色格式和透明度 ####

> CSS3允许我们使用新方法如 RGB或 HSL来声明颜色。另外，我们还能在这两个 方法后边追加一个透明通道（分别是 RGBA和 HSLA）。

##### 6.1、RGB颜色和HSL颜色 #####

>  *  RGB（红绿蓝）是一种已存在了数十年的颜色体系。它的原理是通过定义不同的红绿蓝 色值来组成一个颜色。 color: rgb(254, 2, 8); 圆括号中的颜色值必须按照红、绿、蓝这个顺序排列，中间通过逗号分隔。
>  *  CSS3还可使用 HSL（色相、饱和度、亮度）模式来声明颜色。 hsl(315, 100%, 60%)
>     
>     HSL 被广泛使用是因为它非常容易理解，根据该模式提供的颜色值就能描绘出具体颜 色。
>     
>     HSL模式基于一个 360°的色相环，第一个数字代表色相，60°时为黄色，120°时为绿 色，180°时为色，240°时为蓝色，300°时为洋红色，360°时为红色。所以前面提 到的 HSL颜色色相为 315，所以很容易看出它介于洋红（300°）和红（360°）之间。
>     
>     后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加 饱满的颜色，则第二个值使用一个高一点的百分比即可。后一个值控制亮度，可在 0% 的全黑到 100%的全白之间变化。

##### 6.2、针对IE6、IE7和IE8提供备用颜色值 #####

> 版本 9以下的 IE浏览器不支持 RGB和 HSL。因此，如果需要针对这 些浏览器提供备用的颜色声明，则要将其放在 RGB 或 HSL 值之前。例如，为导航链接增加备用十六进制颜色值的代码如下：
> 
>     nav ul li:nth-child(odd) a { color: #fe0208; color: hsl(359, 99%, 50%); }

##### 6.3、透明通道 #####

> 为什么不继续使用多年可靠的十六进制颜色值？
> 
> **HSL 和 RGB 与十六进制颜色值大的区别，是它 们支持透明通道。这意味着可以让元素透明，使其下方的元素可见。**
> 
> 例如设置一个背景图片，然后设置一个div在上面
> 
>     body{ background:url(../img/gx.jpg) repeat; }
>     
>     #wrapper{ margin-right:auto; margin-left:auto; width:96%;/*最外层的div*/ max-width:1414px; background-color:hsla(0,0%,100%,0.8); }
> 
> **HSLA颜色声明与标准的HSL规则类似。**不过颜色必须得声明为hsla模式（而不是hsl）， 增加一个额外的透明度值，该值的格式是一个介于 0（全透明）到 1（不透明）之间的 小数。上面代码中我们将白色的\#wrapper 设置为半透明。
> 
> RGBA的语法和 HSLA的基本一样，即在颜色值后追加一个透明度值：  
> background-color: rgba(255, 255, 255, 0.8);
> 
> **为什么不用opacity?**
> 
> CSS3还允许通过 opacity 声明来设置元素的透明度。该透明度的值也 是一个介于 0到 1之间的小数（如将 opacity 设置为 0.1表示为 10%透 明）。*但是这种透明度与 RGBA 及 HSLA 有所不同，这种方式设置的透 明度会对整个元素产生影响（元素的内容都会透明）。*反之，使用 HSLA 或 RGBA则可以仅让元素的某些部分有透明效果。这样，一个元素可以 带有 HSLA透明背景，但内部的文字仍然不透明。

#### 7、文字阴影 ####

> 文字阴影text-shadow有过一个前生，在CSS2.1被废除，现在右出现在了CSS3中。
> 
> 基本语法：
> 
>     .element{ text-shadow:1px 1px 1px #cccccc; /*右边的阴影大小、下面的阴影大小、模糊距离、颜色*/ }
> 
> 注意：阴影值的速记规则永远是先向右再向下。因此第一个值指的是右侧阴影的大小，第二个是指的是下方阴影的大小，第三个值指的是模糊距离（阴影从开始变淡到完全消失的距离），最后一个是阴影颜色。
> 
> **HEX、HSL 或 RGB 颜色都可以**
> 
> 上面的阴影颜色不一定非得是十六进制，还可以是HSL(A)或者RGB(A)，注意浏览器必须得同时支持 HSL/RGB颜色和 text-shadow 才能渲染出效果。
> 
> 考虑 到浏览器兼容性，在使用 HSLA或 RGBA阴影时一般都这样做：
> 
>     #pn{ text-shadow: 4px 4px 0px #404442 }
>     
>     
>     #pn{ text-shadow: 4px 4px 0px hsla(140,3%,26%,0.4) }
>     /*先定义一个使用十六进制颜色的阴影（作为针对老版本浏览器的备用方案），然后再定 义一个使用 HSLA或 RGBA颜色的阴影。 */
> 
> **px、em 或 rem 都行**
> 
> 阴影值也可以使用 em 或 rem 单位。
> 
> **取消文字阴影**
> 
>     #pn{ text-shadow:none; }
> 
> **左上方阴影**
> 
>     #pn{ text-shadow:-4px -4px 0px #dad7d7; }
>     /*使用负数可以出现左上方的阴影效果*/
>     /*如果不需要阴影模糊效果，可以将 text-shadow 的第三个值（模糊半径）从声明中删除*/
>     
>     #pn{ text-shadow:-4px -4px #dad7d7; }
>     /*这种简写假定第三个值没有声明，而前两个值表示阴影偏移距离*/

#### 8、盒阴影 ####

> 盒阴影的语法与文字阴影完全一样：水平偏 移距离、垂直偏移距离、模糊半径，以及阴影颜色。
> 
> .element\{text-shadow:2px 3px 4px red\}
> 
> 盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀
> 
>     #pn{ -ms-box-shadow: 0px 3px 5px #444444; -moz-box-shadow: 0px 3px 5px #444444; -webkit-box-shadow: 0px 3px 5px #444444; box-shadow: 0px 3px 5px #444444; }

##### 8.1、内阴影 #####

> box-shadow 属性可以用来制作内阴影——出现在元素内部，而不是外部。内阴影可用 来制作光晕效果。
> 
> 语法：
> 
> .element\{ box-shadow:inset 0 0 40px \#000000 \}
> 
> 语法和之前的盒阴影差不多，只是多出来的 inset 告诉浏览器设置内阴影效果。
> 
>     #pn{ box-shadow:inset 0 0 30px #00000; }

##### 8.1、多重阴影 #####

> 和文字阴影一样，盒阴影也可以有多重阴影效果。语法也类似，即将两组值用逗号分开， 这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上。换句话说，就是代码 中先声明的规则，在浏览器中会覆盖下面的规则。
> 
>     #pn{ box-shadow: inset 0 0 30px hsl(0, 0%, 0%),inset 0 0 70px hsla(0, 97%, 53%, 1); }

#### 9、背景渐变 ####

##### 9.1、线性背景渐变 #####

> 背景渐变唯一美中不足的是它不像其他一些 CSS3 特性那样被广泛支持。比如 IE 9 就没 有对它的原生支持（微软承诺在 IE 10中支持）。
> 
> 语法：
> 
> background: linear-gradient(90deg, \#ffffff 0%, \#e4e4e4 50%, \#ffffff 100%);
> 
>  *  圆括号中第一个（90deg）定义渐变个的方向，不定义该值默认是一个从垂直从顶部到底部的渐变。你还可以使用如 to top right 这样的值，这 会产生一个朝向右上角的对角线渐变。
>  *  第二个值（\#ffffff 0%）,定义了渐变的起点，包括起点的颜色和位置，也可以使用形如 blue 20%这样的值。，这样就是从蓝色开始渐变到下一个颜色，而渐 变开始位置则位于假想的渐变路径的 20%处。同样，起点位置也可以使用负值，这样 渐变从实际可见区域之外就开始了。
>     
>         background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%, #ffffff 100%); 
>         /*渐变方向*/
>         /*渐变起点和颜色*/
>         /*渐变的过度点，包括颜色和位置，有多个过度点使用,隔开*/
>         /*最后一个始终是渐变的终点*/
>         /*linear：线形的，gradient：梯度*/
>  *  第三个值（\#e4d4e4）指的是过渡颜色点，上面代码表示：沿着 90 度垂直方向，从白色开始 （(\#ffffff 0%），向位于渐变路径 50%处的\#e4e4e4 这个颜色（浅灰色）渐变。这里 就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多 的过渡颜色点（使用逗号分隔）。
>  *  最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色 点，后一个值始终是终点。

##### 9.2、径向背景渐变 #####

> CSS3背景渐变不只局限于线性渐变，制作径向渐变同样简单。径向渐变是从一个中心点 开始，依据椭圆形或圆形进行扩张渐变。
> 
> 语法：
> 
> background: radial-gradient(center, ellipse cover, \#ffffff 72%, \#dddddd 100%);
> 
>  *  第一个参数设定起点
>     
>     使用的是center，也可以使用形如25px 25px这样的值，例如
>     
>     background: radial-gradient(25px 25px, ellipse cover, \#ffffff 72%, \#dddddd 100%);
>     
>     表示从距元素上边和左边均为 25 像素的那个点开始渐变
>  *  第二个表示径向渐变的形状和大小
>     
>     形状：渐变形状要么是circle（圆形，渐变会均匀的向各个方向辐射），要么是ellipse（椭圆形，在不同的方向辐射量不同）
>     
>     大小：渐变的形状大小很有灵活性，这个值可以是下面的任何一种
>     
>      *  closest-side:（渐变形状是圆形时）以距离中心点近的一边为渐变半径，或者（渐 变形状是椭圆形时）以距离中心点近的水平或垂直边为渐变半径。
>      *  closest-corner：以距离中心点近的一角为渐变半径。
>      *  farthest-side：和 closest-side 正好相反，（渐变形状是圆形时）以距离中心点 远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点远的水平或垂 直边为渐变半径。
>      *  farthest-corner：以距离中心点远的一角为渐变半径。
>      *  cover：和 farthest-corner 完全一样。
>      *  contain：和 closest-side 完全一样。
>  *  后面的定义渐变起点、过渡颜色点以及终点（这部分和线性渐变是一样的）
>     
>         #pan{ background: radial-gradient( 20px 20px, circle cover, hsla(9,69%,85%,0.5) 0%, hsla(9,76%,63%,1) 50%, hsla(10,98%,46%,1) 51%, hsla(24,100%,50%,1) 75%, hsla(10,100%,39%,1) 100% ); }
>     
>