CSS3

#笔记 CSS

1. 媒介查询

1.1. 响应式实现

• CSS3 媒介查询；
• 借助原生 JavaScript；
• 第三方开源框架（如：bootstrap，多兼容，多支持）；

1.2. 媒介查询

1.2.1. 内嵌方式

@media screen and (min-width: ) and (max-width: ) {}

1.2.2. 外链方式

<link rel="" type="text/css" href=""
    media="screen and (orientation portrait)" /*表竖屏*/
    media="not screen and (orientation portrait)" /*表非竖屏*/
    media="only screen and (max-width: 960px;)" /*表宽度范围*/
 /> 

1.2.3. import 关键字

@import url("…css") screen and (width: ) {} 
/* @import将影响加载速度 */

1.2.4. 可查询的项目

• width, height：渲染窗口即浏览器宽高；
• device-width/device-height：屏幕宽高；
• orientation；
• resolution；
• aspect-ratio: 宽/高；
• color(颜色位数)；
• monochrome；
• scan: progressive/scan: interlace：逐/隔行扫描；
• grid；

2. 画布缩放

2.1. HTML 实现

<meta name="viewport" content="initial-scale=2.0, width=device-width" />

• initial-scale：将对象放大为实际的倍数；
• maximum/minimum-scale：允许用户缩放的上下限（一般是移动端）；
• user-scalable=no：不允许缩放；

2.2. CSS 实现

@viewport {width: } 

3. 特效

3.1. 阴影

3.1.1. 文字阴影

语法：

text-shadow: _(右阴影大小，负左) _(下阴影大小，负上) _(模糊距离) _(色值); 
/* 单位均可为 px/em/rem */

• 浮雕效果：

text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);

• 多重阴影：

text-shadow: 0 1px #fff, 4px 4px 0 #dad7d7;

3.1.2. 盒阴影

语法：与 text-shadow 相同，可能需加前缀，默认为外阴影：

box-shadow: _ _ _ _;

• 内阴影：

box-shadow: inset _ _ _ _;

3.2. 渐变

3.2.1. 线性渐变

linear-gradient(_(方向：to top/bottom或0deg-180deg等), _(初始色值) _(位置：%), …(中间可有多个过渡色，语法同), _(终止色值) _(位置：%));

3.2.2. 径向渐变

radial-gradient(_(位置：center/数值px), _(形状：circle/ellipse) _(大小：closest-side/closest-corner/farthest-side/farthest-corner/cover/contain), _ _(色值), …)

3.2.3. 重复渐变

repeating-radial-gradient/repeating-linear-gradient

3.3. 多重背景

background: url() _ _(定位或颜色信息),
            url() _ _,  
            url() _ _,  
            url() _ _;
background-size: _ _, …(宽、高，按上述顺序), auto/cover/contain;
background-repeat: ; 
background-position: ;

3.4. 过渡

语法（一般配合 :hover 使用）：

transition: _ _ _ _; (按以下4个属性顺序填充)
transition-property: none/all/需要变化的属性名称; 
transition-duration: _s; 
transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;
transition-delay: _s;

3.5. 变形

Transform 手册

3.5.1. 2D

// 正数，表缩放值；
transform: scale(_); 
// 各表示右移、下移，负值相反，px/%；
transform: translate(_, _); 
// 启用 3D 硬件加速；
transform: translateY(_, _);
transform: rotate(_deg); 
// 各表示 x 轴、y 轴，只有一值表示只转动 x 轴；正值顺，负值逆；
transform: skew(_deg, _deg); 
transform: matrix();
// 变形起点默认为中心点，用此语句可改变其起点；
transform-origin: _, _; 

3.5.2. 3D

尚未成熟，只支持 -webkit-，需加前缀

1. 在父级元素上设置透视：
   perspective: _; //数值，表景深，值小则立体效果强；
2. 为各子元素加：
   transform-style: preserve-3d;

3.6. 动画

3.6.1. 设定

@keyframes 手册

@keyframes _(自定义动画名称) {
  0%{…}
  ..%{…}
  100%{…}
} 
// 可把 0%、100% 替换为 from、to，但推荐用 %；

3.6.2. 引用

Animation 手册

animation: _(名称) _(持续时间) _(方式) _(速度); 
animation-name: _;
animation-duration: _;
animation-timing-function: (同transition);
animation-iteration-count: infinite; (循环播放)
animation-play-state: runing/pause;
animation-delay: _s;
animation-fill-mode: none; 

4. 设计

4.1. 版式

4.1.1. 分栏排版

语法：

column-width: em/px;
// 或者——
column-count:;

• 栏位间隙：

column-gap: em/px;

• 分割线：

column-rule:;
// 语法同 `border`

4.1.2. 文字换行

语法：word-wrap: break-word;

4.2. 字体

• IE: eot;
• others: ttf, svg, woff.

@font-face {
  font-family:; 
  src: url();
  src: url(?#iefix) format('embedded-opentype'),
       url() format('woff'),
       url() format('truetype'),
       ulr() format(''svg);
  font-weigh:; 
  font-style:;
}

4.3. 颜色

• 含 rgba 及 hsla 两种；
• 与 opacity区别：opacity 让整个元素都透明；rgba/hsla 只让颜色透明

5. 私有前缀

• 最后以原声明覆盖一遍