@EncyKe
2017-03-10T03:36:12.000000Z
字数 3211
阅读 2602
#笔记
CSS
@media screen and (min-width: ) and (max-width: ) {}
<link rel="" type="text/css" href=""
media="screen and (orientation portrait)" /*表竖屏*/
media="not screen and (orientation portrait)" /*表非竖屏*/
media="only screen and (max-width: 960px;)" /*表宽度范围*/
/>
@import url("…css") screen and (width: ) {}
/* @import将影响加载速度 */
width, height
:渲染窗口即浏览器宽高;device-width
/device-height
:屏幕宽高;orientation
;resolution
;aspect-ratio: 宽/高
;color(颜色位数)
;monochrome
;scan: progressive
/scan: interlace
:逐/隔行扫描;grid
;
<meta name="viewport" content="initial-scale=2.0, width=device-width" />
initial-scale
:将对象放大为实际的倍数;maximum/minimum-scale
:允许用户缩放的上下限(一般是移动端);user-scalable=no
:不允许缩放;
@viewport {width: }
语法:
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;
语法:与 text-shadow 相同,可能需加前缀,默认为外阴影:
box-shadow: _ _ _ _;
box-shadow: inset _ _ _ _;
linear-gradient(_(方向:to top/bottom或0deg-180deg等), _(初始色值) _(位置:%), …(中间可有多个过渡色,语法同), _(终止色值) _(位置:%));
radial-gradient(_(位置:center/数值px), _(形状:circle/ellipse) _(大小:closest-side/closest-corner/farthest-side/farthest-corner/cover/contain), _ _(色值), …)
repeating-radial-gradient
/repeating-linear-gradient
background: url() _ _(定位或颜色信息),
url() _ _,
url() _ _,
url() _ _;
background-size: _ _, …(宽、高,按上述顺序), auto/cover/contain;
background-repeat: ;
background-position: ;
语法(一般配合 :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;
// 正数,表缩放值;
transform: scale(_);
// 各表示右移、下移,负值相反,px/%;
transform: translate(_, _);
// 启用 3D 硬件加速;
transform: translateY(_, _);
transform: rotate(_deg);
// 各表示 x 轴、y 轴,只有一值表示只转动 x 轴;正值顺,负值逆;
transform: skew(_deg, _deg);
transform: matrix();
// 变形起点默认为中心点,用此语句可改变其起点;
transform-origin: _, _;
尚未成熟,只支持 -webkit-,需加前缀
perspective: _; //数值,表景深,值小则立体效果强;
transform-style: preserve-3d;
@keyframes _(自定义动画名称) {
0%{…}
..%{…}
100%{…}
}
// 可把 0%、100% 替换为 from、to,但推荐用 %;
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;
语法:
column-width: em/px;
// 或者——
column-count:;
column-gap: em/px;
column-rule:;
// 语法同 `border`
语法:word-wrap: break-word;
@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:;
}
前缀 | 引擎 |
---|---|
-khtml- | Konqueror |
-rim- | RIM |
-ms- | IE |
-o- | Opera |
-moz- | FF |
-webkit- | Chrome&Safari |