[关闭]
@EncyKe 2017-03-10T03:36:12.000000Z 字数 3211 阅读 2233

CSS3

#笔记 CSS



1. 媒介查询

1.1. 响应式实现

1.2. 媒介查询

1.2.1. 内嵌方式

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

1.2.2. 外链方式

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

1.2.3. import 关键字

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

1.2.4. 可查询的项目

2. 画布缩放

2.1. HTML 实现

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

2.2. CSS 实现

  1. @viewport {width: }

3. 特效

3.1. 阴影

3.1.1. 文字阴影

语法:

  1. text-shadow: _(右阴影大小,负左) _(下阴影大小,负上) _(模糊距离) _(色值);
  2. /* 单位均可为 px/em/rem */
  1. text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
  1. text-shadow: 0 1px #fff, 4px 4px 0 #dad7d7;

3.1.2. 盒阴影

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

  1. box-shadow: _ _ _ _;
  1. box-shadow: inset _ _ _ _;

3.2. 渐变

3.2.1. 线性渐变

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

3.2.2. 径向渐变

  1. 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. 多重背景

  1. background: url() _ _(定位或颜色信息),
  2. url() _ _,
  3. url() _ _,
  4. url() _ _;
  5. background-size: _ _, …(宽、高,按上述顺序), auto/cover/contain;
  6. background-repeat: ;
  7. background-position: ;

3.4. 过渡

语法(一般配合 :hover 使用):

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

3.5. 变形

Transform 手册

3.5.1. 2D

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

3.5.2. 3D

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

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

3.6. 动画

3.6.1. 设定

@keyframes 手册

  1. @keyframes _(自定义动画名称) {
  2. 0%{…}
  3. ..%{…}
  4. 100%{…}
  5. }
  6. // 可把 0%、100% 替换为 from、to,但推荐用 %;

3.6.2. 引用

Animation 手册

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

4. 设计

4.1. 版式

4.1.1. 分栏排版

语法:

  1. column-width: em/px;
  2. // 或者——
  3. column-count:;
  1. column-gap: em/px;
  1. column-rule:;
  2. // 语法同 `border`

4.1.2. 文字换行

语法:word-wrap: break-word;

4.2. 字体

  1. @font-face {
  2. font-family:;
  3. src: url();
  4. src: url(?#iefix) format('embedded-opentype'),
  5. url() format('woff'),
  6. url() format('truetype'),
  7. ulr() format(''svg);
  8. font-weigh:;
  9. font-style:;
  10. }

4.3. 颜色

5. 私有前缀

前缀 引擎
-khtml- Konqueror
-rim- RIM
-ms- IE
-o- Opera
-moz- FF
-webkit- Chrome&Safari

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注