From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/zh-cn/_redirects.txt | 83 +++--- files/zh-cn/_wikihistory.json | 100 +++---- .../web/css/transform-function/skewx/index.html | 131 +++++++++ files/zh-cn/web/css/_colon_host()/index.html | 90 ------ .../zh-cn/web/css/_colon_host_function/index.html | 91 ++++++ files/zh-cn/web/css/attr()/index.html | 303 -------------------- files/zh-cn/web/css/attr/index.html | 304 +++++++++++++++++++++ files/zh-cn/web/css/calc()/index.html | 163 ----------- files/zh-cn/web/css/calc/index.html | 164 +++++++++++ files/zh-cn/web/css/clamp()/index.html | 121 -------- files/zh-cn/web/css/clamp/index.html | 122 +++++++++ files/zh-cn/web/css/counter()/index.html | 145 ---------- files/zh-cn/web/css/counter/index.html | 146 ++++++++++ files/zh-cn/web/css/counters()/index.html | 188 ------------- files/zh-cn/web/css/counters/index.html | 189 +++++++++++++ files/zh-cn/web/css/element()/index.html | 103 ------- files/zh-cn/web/css/element/index.html | 104 +++++++ files/zh-cn/web/css/env()/index.html | 133 --------- files/zh-cn/web/css/env/index.html | 134 +++++++++ .../web/css/filter-function/blur()/index.html | 49 ---- .../zh-cn/web/css/filter-function/blur/index.html | 50 ++++ .../css/filter-function/brightness()/index.html | 36 --- .../web/css/filter-function/brightness/index.html | 37 +++ .../web/css/filter-function/contrast()/index.html | 45 --- .../web/css/filter-function/contrast/index.html | 46 ++++ .../css/filter-function/drop-shadow()/index.html | 65 ----- .../web/css/filter-function/drop-shadow/index.html | 66 +++++ .../web/css/filter-function/grayscale()/index.html | 35 --- .../web/css/filter-function/grayscale/index.html | 36 +++ .../web/css/filter-function/opacity()/index.html | 40 --- .../web/css/filter-function/opacity/index.html | 41 +++ .../web/css/gradient/linear-gradient()/index.html | 281 ------------------- .../web/css/gradient/linear-gradient/index.html | 281 +++++++++++++++++++ .../web/css/gradient/radial-gradient()/index.html | 196 ------------- .../web/css/gradient/radial-gradient/index.html | 197 +++++++++++++ .../repeating-linear-gradient()/index.html | 170 ------------ .../gradient/repeating-linear-gradient/index.html | 171 ++++++++++++ .../repeating-radial-gradient()/index.html | 181 ------------ .../gradient/repeating-radial-gradient/index.html | 182 ++++++++++++ files/zh-cn/web/css/max()/index.html | 120 -------- files/zh-cn/web/css/max/index.html | 121 ++++++++ files/zh-cn/web/css/min()/index.html | 130 --------- files/zh-cn/web/css/min/index.html | 131 +++++++++ files/zh-cn/web/css/minmax()/index.html | 198 -------------- files/zh-cn/web/css/minmax/index.html | 199 ++++++++++++++ files/zh-cn/web/css/repeat()/index.html | 143 ---------- files/zh-cn/web/css/repeat/index.html | 144 ++++++++++ .../web/css/transform-function/matrix()/index.html | 84 ------ .../web/css/transform-function/matrix/index.html | 85 ++++++ .../css/transform-function/matrix3d()/index.html | 153 ----------- .../web/css/transform-function/matrix3d/index.html | 154 +++++++++++ .../transform-function/perspective()/index.html | 46 ---- .../css/transform-function/perspective/index.html | 47 ++++ .../web/css/transform-function/rotate()/index.html | 90 ------ .../web/css/transform-function/rotate/index.html | 91 ++++++ .../css/transform-function/rotate3d()/index.html | 127 --------- .../web/css/transform-function/rotate3d/index.html | 128 +++++++++ .../css/transform-function/rotatex()/index.html | 107 -------- .../web/css/transform-function/rotatex/index.html | 108 ++++++++ .../css/transform-function/rotatey()/index.html | 107 -------- .../web/css/transform-function/rotatey/index.html | 108 ++++++++ .../css/transform-function/rotatez()/index.html | 107 -------- .../web/css/transform-function/rotatez/index.html | 108 ++++++++ .../web/css/transform-function/scale()/index.html | 111 -------- .../web/css/transform-function/scale/index.html | 112 ++++++++ .../web/css/transform-function/scalex()/index.html | 109 -------- .../web/css/transform-function/scalex/index.html | 110 ++++++++ .../web/css/transform-function/scaley()/index.html | 91 ------ .../web/css/transform-function/scaley/index.html | 92 +++++++ .../web/css/transform-function/skew()/index.html | 139 ---------- .../web/css/transform-function/skew/index.html | 140 ++++++++++ .../web/css/transform-function/skewx()/index.html | 107 -------- .../web/css/transform-function/skewx/index.html | 108 ++++++++ .../web/css/transform-function/skewy()/index.html | 130 --------- .../css/transform-function/translate()/index.html | 152 ----------- .../css/transform-function/translate/index.html | 153 +++++++++++ .../transform-function/translate3d()/index.html | 138 ---------- .../css/transform-function/translate3d/index.html | 139 ++++++++++ .../css/transform-function/translatex()/index.html | 132 --------- .../css/transform-function/translatex/index.html | 133 +++++++++ .../css/transform-function/translatey()/index.html | 115 -------- .../css/transform-function/translatey/index.html | 116 ++++++++ files/zh-cn/web/css/url()/index.html | 82 ------ files/zh-cn/web/css/url/index.html | 82 ++++++ files/zh-cn/web/css/var()/index.html | 98 ------- files/zh-cn/web/css/var/index.html | 99 +++++++ 86 files changed, 5295 insertions(+), 5248 deletions(-) create mode 100644 files/zh-cn/conflicting/web/css/transform-function/skewx/index.html delete mode 100644 files/zh-cn/web/css/_colon_host()/index.html create mode 100644 files/zh-cn/web/css/_colon_host_function/index.html delete mode 100644 files/zh-cn/web/css/attr()/index.html create mode 100644 files/zh-cn/web/css/attr/index.html delete mode 100644 files/zh-cn/web/css/calc()/index.html create mode 100644 files/zh-cn/web/css/calc/index.html delete mode 100644 files/zh-cn/web/css/clamp()/index.html create mode 100644 files/zh-cn/web/css/clamp/index.html delete mode 100644 files/zh-cn/web/css/counter()/index.html create mode 100644 files/zh-cn/web/css/counter/index.html delete mode 100644 files/zh-cn/web/css/counters()/index.html create mode 100644 files/zh-cn/web/css/counters/index.html delete mode 100644 files/zh-cn/web/css/element()/index.html create mode 100644 files/zh-cn/web/css/element/index.html delete mode 100644 files/zh-cn/web/css/env()/index.html create mode 100644 files/zh-cn/web/css/env/index.html delete mode 100644 files/zh-cn/web/css/filter-function/blur()/index.html create mode 100644 files/zh-cn/web/css/filter-function/blur/index.html delete mode 100644 files/zh-cn/web/css/filter-function/brightness()/index.html create mode 100644 files/zh-cn/web/css/filter-function/brightness/index.html delete mode 100644 files/zh-cn/web/css/filter-function/contrast()/index.html create mode 100644 files/zh-cn/web/css/filter-function/contrast/index.html delete mode 100644 files/zh-cn/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/zh-cn/web/css/filter-function/drop-shadow/index.html delete mode 100644 files/zh-cn/web/css/filter-function/grayscale()/index.html create mode 100644 files/zh-cn/web/css/filter-function/grayscale/index.html delete mode 100644 files/zh-cn/web/css/filter-function/opacity()/index.html create mode 100644 files/zh-cn/web/css/filter-function/opacity/index.html delete mode 100644 files/zh-cn/web/css/gradient/linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/linear-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/radial-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html delete mode 100644 files/zh-cn/web/css/max()/index.html create mode 100644 files/zh-cn/web/css/max/index.html delete mode 100644 files/zh-cn/web/css/min()/index.html create mode 100644 files/zh-cn/web/css/min/index.html delete mode 100644 files/zh-cn/web/css/minmax()/index.html create mode 100644 files/zh-cn/web/css/minmax/index.html delete mode 100644 files/zh-cn/web/css/repeat()/index.html create mode 100644 files/zh-cn/web/css/repeat/index.html delete mode 100644 files/zh-cn/web/css/transform-function/matrix()/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix/index.html delete mode 100644 files/zh-cn/web/css/transform-function/matrix3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/perspective()/index.html create mode 100644 files/zh-cn/web/css/transform-function/perspective/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatey()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatey/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatez()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatez/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scale()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scale/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scalex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scalex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scaley()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scaley/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skew()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skew/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skewx()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skewx/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skewy()/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translatex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translatey()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatey/index.html delete mode 100644 files/zh-cn/web/css/url()/index.html create mode 100644 files/zh-cn/web/css/url/index.html delete mode 100644 files/zh-cn/web/css/var()/index.html create mode 100644 files/zh-cn/web/css/var/index.html (limited to 'files/zh-cn') diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 5a4c050b16..6590cb09ce 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -63,7 +63,7 @@ /zh-CN/docs/CSS/animation-duration /zh-CN/docs/Web/CSS/animation-duration /zh-CN/docs/CSS/animation-fill-mode /zh-CN/docs/Web/CSS/animation-fill-mode /zh-CN/docs/CSS/animation-name /zh-CN/docs/Web/CSS/animation-name -/zh-CN/docs/CSS/attr /zh-CN/docs/Web/CSS/attr() +/zh-CN/docs/CSS/attr /zh-CN/docs/Web/CSS/attr /zh-CN/docs/CSS/background /zh-CN/docs/Web/CSS/background /zh-CN/docs/CSS/background-attachment /zh-CN/docs/Web/CSS/background-attachment /zh-CN/docs/CSS/background-clip /zh-CN/docs/Web/CSS/background-clip @@ -79,7 +79,7 @@ /zh-CN/docs/CSS/box-shadow /zh-CN/docs/Web/CSS/box-shadow /zh-CN/docs/CSS/box-sizing /zh-CN/docs/Web/CSS/box-sizing /zh-CN/docs/CSS/box_model /zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/zh-CN/docs/CSS/calc /zh-CN/docs/Web/CSS/calc() +/zh-CN/docs/CSS/calc /zh-CN/docs/Web/CSS/calc /zh-CN/docs/CSS/clip /zh-CN/docs/Web/CSS/clip /zh-CN/docs/CSS/cursor /zh-CN/docs/Web/CSS/cursor /zh-CN/docs/CSS/cursor/url /zh-CN/docs/conflicting/Web/CSS/cursor @@ -1757,6 +1757,7 @@ /zh-CN/docs/Web/CSS/边框分割 /zh-CN/docs/Web/CSS/border-collapse /zh-CN/docs/Web/CSS/-moz-appearance /zh-CN/docs/Web/CSS/appearance /zh-CN/docs/Web/CSS/:blank空白伪类 /zh-CN/docs/Web/CSS/:blank +/zh-CN/docs/Web/CSS/:host() /zh-CN/docs/Web/CSS/:host_function /zh-CN/docs/Web/CSS/:matches /zh-CN/docs/Web/CSS/:is /zh-CN/docs/Web/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Adjacent_sibling_combinator /zh-CN/docs/Web/CSS/All_About_The_Containing_Block /zh-CN/docs/Web/CSS/Containing_block @@ -1800,46 +1801,52 @@ /zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /zh-CN/docs/Web/CSS/Using_CSS_variables /zh-CN/docs/Web/CSS/Using_CSS_custom_properties -/zh-CN/docs/Web/CSS/attr /zh-CN/docs/Web/CSS/attr() +/zh-CN/docs/Web/CSS/attr() /zh-CN/docs/Web/CSS/attr /zh-CN/docs/Web/CSS/box_model /zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/zh-CN/docs/Web/CSS/calc /zh-CN/docs/Web/CSS/calc() -/zh-CN/docs/Web/CSS/clamp /zh-CN/docs/Web/CSS/clamp() -/zh-CN/docs/Web/CSS/counter /zh-CN/docs/Web/CSS/counter() -/zh-CN/docs/Web/CSS/counters /zh-CN/docs/Web/CSS/counters() +/zh-CN/docs/Web/CSS/calc() /zh-CN/docs/Web/CSS/calc +/zh-CN/docs/Web/CSS/clamp() /zh-CN/docs/Web/CSS/clamp +/zh-CN/docs/Web/CSS/counter() /zh-CN/docs/Web/CSS/counter +/zh-CN/docs/Web/CSS/counters() /zh-CN/docs/Web/CSS/counters /zh-CN/docs/Web/CSS/cursor/url /zh-CN/docs/conflicting/Web/CSS/cursor -/zh-CN/docs/Web/CSS/element /zh-CN/docs/Web/CSS/element() -/zh-CN/docs/Web/CSS/env /zh-CN/docs/Web/CSS/env() -/zh-CN/docs/Web/CSS/filter-function/blur /zh-CN/docs/Web/CSS/filter-function/blur() -/zh-CN/docs/Web/CSS/filter-function/brightness /zh-CN/docs/Web/CSS/filter-function/brightness() -/zh-CN/docs/Web/CSS/filter-function/contrast /zh-CN/docs/Web/CSS/filter-function/contrast() -/zh-CN/docs/Web/CSS/filter-function/drop-shadow /zh-CN/docs/Web/CSS/filter-function/drop-shadow() -/zh-CN/docs/Web/CSS/filter-function/grayscale /zh-CN/docs/Web/CSS/filter-function/grayscale() -/zh-CN/docs/Web/CSS/filter-function/opacity /zh-CN/docs/Web/CSS/filter-function/opacity() +/zh-CN/docs/Web/CSS/element() /zh-CN/docs/Web/CSS/element +/zh-CN/docs/Web/CSS/env() /zh-CN/docs/Web/CSS/env +/zh-CN/docs/Web/CSS/filter-function/blur() /zh-CN/docs/Web/CSS/filter-function/blur +/zh-CN/docs/Web/CSS/filter-function/brightness() /zh-CN/docs/Web/CSS/filter-function/brightness +/zh-CN/docs/Web/CSS/filter-function/contrast() /zh-CN/docs/Web/CSS/filter-function/contrast +/zh-CN/docs/Web/CSS/filter-function/drop-shadow() /zh-CN/docs/Web/CSS/filter-function/drop-shadow +/zh-CN/docs/Web/CSS/filter-function/grayscale() /zh-CN/docs/Web/CSS/filter-function/grayscale +/zh-CN/docs/Web/CSS/filter-function/opacity() /zh-CN/docs/Web/CSS/filter-function/opacity /zh-CN/docs/Web/CSS/filter滤镜 /zh-CN/docs/Web/CSS/filter +/zh-CN/docs/Web/CSS/gradient/linear-gradient() /zh-CN/docs/Web/CSS/gradient/linear-gradient +/zh-CN/docs/Web/CSS/gradient/radial-gradient() /zh-CN/docs/Web/CSS/gradient/radial-gradient +/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient() /zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient +/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient() /zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient /zh-CN/docs/Web/CSS/margin_collapsing /zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/zh-CN/docs/Web/CSS/max /zh-CN/docs/Web/CSS/max() -/zh-CN/docs/Web/CSS/min /zh-CN/docs/Web/CSS/min() -/zh-CN/docs/Web/CSS/minmax /zh-CN/docs/Web/CSS/minmax() -/zh-CN/docs/Web/CSS/repeat /zh-CN/docs/Web/CSS/repeat() -/zh-CN/docs/Web/CSS/transform-function/matrix /zh-CN/docs/Web/CSS/transform-function/matrix() -/zh-CN/docs/Web/CSS/transform-function/matrix3d /zh-CN/docs/Web/CSS/transform-function/matrix3d() -/zh-CN/docs/Web/CSS/transform-function/perspective /zh-CN/docs/Web/CSS/transform-function/perspective() -/zh-CN/docs/Web/CSS/transform-function/rotate /zh-CN/docs/Web/CSS/transform-function/rotate() -/zh-CN/docs/Web/CSS/transform-function/rotate3d /zh-CN/docs/Web/CSS/transform-function/rotate3d() -/zh-CN/docs/Web/CSS/transform-function/rotateX /zh-CN/docs/Web/CSS/transform-function/rotateX() -/zh-CN/docs/Web/CSS/transform-function/rotateY /zh-CN/docs/Web/CSS/transform-function/rotateY() -/zh-CN/docs/Web/CSS/transform-function/rotateZ /zh-CN/docs/Web/CSS/transform-function/rotateZ() -/zh-CN/docs/Web/CSS/transform-function/scale /zh-CN/docs/Web/CSS/transform-function/scale() -/zh-CN/docs/Web/CSS/transform-function/scaleX /zh-CN/docs/Web/CSS/transform-function/scaleX() -/zh-CN/docs/Web/CSS/transform-function/scaleY /zh-CN/docs/Web/CSS/transform-function/scaleY() -/zh-CN/docs/Web/CSS/transform-function/skew /zh-CN/docs/Web/CSS/transform-function/skew() -/zh-CN/docs/Web/CSS/transform-function/skewX /zh-CN/docs/Web/CSS/transform-function/skewX() -/zh-CN/docs/Web/CSS/transform-function/skewY /zh-CN/docs/Web/CSS/transform-function/skewY() -/zh-CN/docs/Web/CSS/transform-function/translate /zh-CN/docs/Web/CSS/transform-function/translate() -/zh-CN/docs/Web/CSS/transform-function/translate3d /zh-CN/docs/Web/CSS/transform-function/translate3d() -/zh-CN/docs/Web/CSS/transform-function/translateY /zh-CN/docs/Web/CSS/transform-function/translateY() -/zh-CN/docs/Web/CSS/url /zh-CN/docs/Web/CSS/url() -/zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/var() +/zh-CN/docs/Web/CSS/max() /zh-CN/docs/Web/CSS/max +/zh-CN/docs/Web/CSS/min() /zh-CN/docs/Web/CSS/min +/zh-CN/docs/Web/CSS/minmax() /zh-CN/docs/Web/CSS/minmax +/zh-CN/docs/Web/CSS/repeat() /zh-CN/docs/Web/CSS/repeat +/zh-CN/docs/Web/CSS/transform-function/matrix() /zh-CN/docs/Web/CSS/transform-function/matrix +/zh-CN/docs/Web/CSS/transform-function/matrix3d() /zh-CN/docs/Web/CSS/transform-function/matrix3d +/zh-CN/docs/Web/CSS/transform-function/perspective() /zh-CN/docs/Web/CSS/transform-function/perspective +/zh-CN/docs/Web/CSS/transform-function/rotate() /zh-CN/docs/Web/CSS/transform-function/rotate +/zh-CN/docs/Web/CSS/transform-function/rotate3d() /zh-CN/docs/Web/CSS/transform-function/rotate3d +/zh-CN/docs/Web/CSS/transform-function/rotateX() /zh-CN/docs/Web/CSS/transform-function/rotateX +/zh-CN/docs/Web/CSS/transform-function/rotateY() /zh-CN/docs/Web/CSS/transform-function/rotateY +/zh-CN/docs/Web/CSS/transform-function/rotateZ() /zh-CN/docs/Web/CSS/transform-function/rotateZ +/zh-CN/docs/Web/CSS/transform-function/scale() /zh-CN/docs/Web/CSS/transform-function/scale +/zh-CN/docs/Web/CSS/transform-function/scaleX() /zh-CN/docs/Web/CSS/transform-function/scaleX +/zh-CN/docs/Web/CSS/transform-function/scaleY() /zh-CN/docs/Web/CSS/transform-function/scaleY +/zh-CN/docs/Web/CSS/transform-function/skew() /zh-CN/docs/Web/CSS/transform-function/skew +/zh-CN/docs/Web/CSS/transform-function/skewX() /zh-CN/docs/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/skewY /zh-CN/docs/conflicting/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/skewY() /zh-CN/docs/conflicting/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/translate() /zh-CN/docs/Web/CSS/transform-function/translate +/zh-CN/docs/Web/CSS/transform-function/translate3d() /zh-CN/docs/Web/CSS/transform-function/translate3d +/zh-CN/docs/Web/CSS/transform-function/translateX() /zh-CN/docs/Web/CSS/transform-function/translateX +/zh-CN/docs/Web/CSS/transform-function/translateY() /zh-CN/docs/Web/CSS/transform-function/translateY +/zh-CN/docs/Web/CSS/url() /zh-CN/docs/Web/CSS/url +/zh-CN/docs/Web/CSS/var() /zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/word-wrap /zh-CN/docs/Web/CSS/overflow-wrap /zh-CN/docs/Web/CSS/偏移 /zh-CN/docs/Web/CSS/offset /zh-CN/docs/Web/CSS/动画 /zh-CN/docs/Web/CSS/animation diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 54f83cc3f3..e0f33667df 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -25143,7 +25143,13 @@ "zhangchen" ] }, - "Web/CSS/:host()": { + "Web/CSS/:host-context()": { + "modified": "2020-10-15T22:22:18.002Z", + "contributors": [ + "jhjocelyn" + ] + }, + "Web/CSS/:host_function": { "modified": "2020-10-15T22:16:54.122Z", "contributors": [ "karma2014", @@ -25151,12 +25157,6 @@ "764777472" ] }, - "Web/CSS/:host-context()": { - "modified": "2020-10-15T22:22:18.002Z", - "contributors": [ - "jhjocelyn" - ] - }, "Web/CSS/:hover": { "modified": "2019-03-23T23:09:30.132Z", "contributors": [ @@ -27243,7 +27243,7 @@ "jcplus" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:52:10.558Z", "contributors": [ "chrisdavidmills", @@ -27872,7 +27872,7 @@ "SheltonDong" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:38.821Z", "contributors": [ "chrisdavidmills", @@ -27910,7 +27910,7 @@ "ziyunfei" ] }, - "Web/CSS/clamp()": { + "Web/CSS/clamp": { "modified": "2020-11-05T09:58:52.297Z", "contributors": [ "chrisdavidmills", @@ -28112,7 +28112,7 @@ "Darrel.Hsu" ] }, - "Web/CSS/counter()": { + "Web/CSS/counter": { "modified": "2020-11-09T07:18:40.908Z", "contributors": [ "chrisdavidmills", @@ -28139,7 +28139,7 @@ "FredWe" ] }, - "Web/CSS/counters()": { + "Web/CSS/counters": { "modified": "2020-11-09T07:19:47.276Z", "contributors": [ "chrisdavidmills", @@ -28246,7 +28246,7 @@ "ran" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:07:35.733Z", "contributors": [ "chrisdavidmills", @@ -28262,7 +28262,7 @@ "alongite" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:12:04.536Z", "contributors": [ "chrisdavidmills", @@ -28294,7 +28294,7 @@ "mfluehr" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:54.071Z", "contributors": [ "chrisdavidmills", @@ -28302,7 +28302,7 @@ "cheetooo" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:28.957Z", "contributors": [ "chrisdavidmills", @@ -28310,14 +28310,14 @@ "cheetooo" ] }, - "Web/CSS/filter-function/contrast()": { + "Web/CSS/filter-function/contrast": { "modified": "2020-11-09T07:21:22.300Z", "contributors": [ "chrisdavidmills", "shirlay-Chang" ] }, - "Web/CSS/filter-function/drop-shadow()": { + "Web/CSS/filter-function/drop-shadow": { "modified": "2020-11-10T10:59:15.589Z", "contributors": [ "chrisdavidmills", @@ -28325,7 +28325,7 @@ "deajax" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:21:16.375Z", "contributors": [ "chrisdavidmills", @@ -28333,7 +28333,7 @@ "MichealXie" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:08:21.720Z", "contributors": [ "chrisdavidmills", @@ -29177,7 +29177,7 @@ "smilewalker" ] }, - "Web/CSS/max()": { + "Web/CSS/max": { "modified": "2020-11-16T09:03:04.400Z", "contributors": [ "chrisdavidmills", @@ -29199,7 +29199,7 @@ "monsuns" ] }, - "Web/CSS/min()": { + "Web/CSS/min": { "modified": "2020-11-16T09:04:41.929Z", "contributors": [ "chrisdavidmills", @@ -29226,7 +29226,7 @@ "sunnylost" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:06:57.403Z", "contributors": [ "chrisdavidmills", @@ -29637,7 +29637,7 @@ "BKHK" ] }, - "Web/CSS/repeat()": { + "Web/CSS/repeat": { "modified": "2020-11-18T14:44:47.276Z", "contributors": [ "chrisdavidmills", @@ -30064,7 +30064,7 @@ "FredWe" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T09:00:25.677Z", "contributors": [ "chrisdavidmills", @@ -30077,21 +30077,21 @@ "tonnylyz" ] }, - "Web/CSS/transform-function/matrix3d()": { + "Web/CSS/transform-function/matrix3d": { "modified": "2020-11-16T09:01:45.264Z", "contributors": [ "chrisdavidmills", "mdn_idealist" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:11:13.696Z", "contributors": [ "chrisdavidmills", "eeeeeeeason" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:06:30.046Z", "contributors": [ "chrisdavidmills", @@ -30101,7 +30101,7 @@ "FlowingRiver" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:52.729Z", "contributors": [ "chrisdavidmills", @@ -30113,28 +30113,28 @@ "Serifx" ] }, - "Web/CSS/transform-function/rotateX()": { + "Web/CSS/transform-function/rotateX": { "modified": "2020-11-19T16:09:23.631Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/rotateY()": { + "Web/CSS/transform-function/rotateY": { "modified": "2020-11-19T16:10:17.879Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/rotateZ()": { + "Web/CSS/transform-function/rotateZ": { "modified": "2020-11-30T10:07:54.353Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:16:03.265Z", "contributors": [ "chrisdavidmills", @@ -30142,21 +30142,21 @@ "Jack-Q" ] }, - "Web/CSS/transform-function/scaleX()": { + "Web/CSS/transform-function/scaleX": { "modified": "2020-11-30T10:21:00.840Z", "contributors": [ "chrisdavidmills", "xgqfrms-GitHub" ] }, - "Web/CSS/transform-function/scaleY()": { + "Web/CSS/transform-function/scaleY": { "modified": "2020-11-30T10:22:06.571Z", "contributors": [ "chrisdavidmills", "xgqfrms" ] }, - "Web/CSS/transform-function/skew()": { + "Web/CSS/transform-function/skew": { "modified": "2020-11-30T10:26:15.757Z", "contributors": [ "chrisdavidmills", @@ -30165,29 +30165,21 @@ "fr1ee" ] }, - "Web/CSS/transform-function/skewX()": { + "Web/CSS/transform-function/skewX": { "modified": "2020-11-30T10:27:30.549Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/skewY()": { - "modified": "2020-11-30T10:28:32.252Z", - "contributors": [ - "chrisdavidmills", - "CharCat", - "Kuichen" - ] - }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:52.319Z", "contributors": [ "chrisdavidmills", "jiang-hr" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-11-30T12:59:28.646Z", "contributors": [ "chrisdavidmills", @@ -30198,7 +30190,7 @@ "zxk7516" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-11-30T13:01:20.573Z", "contributors": [ "chrisdavidmills", @@ -30308,7 +30300,7 @@ "LiNengNeng" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2019-03-23T22:25:44.664Z", "contributors": [ "zhyupe" @@ -30336,7 +30328,7 @@ "MrFish" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:48.035Z", "contributors": [ "chrisdavidmills", @@ -47514,6 +47506,14 @@ "ziyunfei" ] }, + "conflicting/Web/CSS/transform-function/skewX": { + "modified": "2020-11-30T10:28:32.252Z", + "contributors": [ + "chrisdavidmills", + "CharCat", + "Kuichen" + ] + }, "conflicting/Web/Guide": { "modified": "2019-03-24T00:05:29.399Z", "contributors": [ diff --git a/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html new file mode 100644 index 0000000000..96448a9d02 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html @@ -0,0 +1,131 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +--- +
+

{{CSSRef}}

+ +

skewY() 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

+ +

{{EmbedInteractiveExample("pages/css/function-skewY.html")}}

+ +

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

+
+ +

语法

+ +
skewY(a)
+
+ +

参数值

+ +
+
a
+
+ +
+
a 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。
+
+ + + + + + + + + + + + + + + + + + + + + +
实坐标系 ℝ2齐次坐标系ℝℙ2实坐标系 ℝ3齐次坐标系ℝℙ3
+

1           0

+ +

tan(ax)  1

+ 		+

1                0     0

+ +

tan(ax)      1     0

+ +

0                 0    1 

+ 		+

1             0        0

+ +

tan(ax)   1        0

+ +

0              0       1

+ 		+

1            0  0  0

+ +

tan(ax) 1   0  0

+ +

0            0  1  0

+ +

0            0  0  1

+
[1 tan(a) 0 1 0 0]
+ +

示例

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例","100%","250")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/_colon_host()/index.html b/files/zh-cn/web/css/_colon_host()/index.html deleted file mode 100644 index 5b67042ed0..0000000000 --- a/files/zh-cn/web/css/_colon_host()/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -tags: - - ':host()' - - CSS - - Layout - - Pseudo-class - - RTeference - - Web -translation_of: 'Web/CSS/:host()' ---- -
{{seecompattable}}{{CSSRef}} 
- -
CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
- -

最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。

- -
-

注意：在shadow DOM之外使用时，这没有任何效果。

-
- -
/* 选择阴影根元素，仅当它与选择器参数匹配 */
- :host(.special-custom-element) {
-   font-weight: bold;
- }
- -

句法

- -{{csssyntax}} - -

例子

- - - -

以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

- -

在这个例子中，有一个简单的自定义元素 <context-span> 可以用它包裹文本：

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

在元素的构造函数中，创建style和span元素，填充span自定义元素的内容，并style使用一些 CSS 规则填充元素：

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

:host(.footer) { color : red; } 规则为文档中所有在其上设置了 footer 类的<context-span> 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。

- -

产品规格

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS Scope', '#host-selector', ':host()') }}{{ Spec2('CSS Scope') }}Initial definition.
- -

浏览器兼容性

- -

{{Compat("css.selectors.hostfunction")}}

- -

也可以看看

- - diff --git a/files/zh-cn/web/css/_colon_host_function/index.html b/files/zh-cn/web/css/_colon_host_function/index.html new file mode 100644 index 0000000000..034de46da5 --- /dev/null +++ b/files/zh-cn/web/css/_colon_host_function/index.html @@ -0,0 +1,91 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +tags: + - ':host()' + - CSS + - Layout + - Pseudo-class + - RTeference + - Web +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +--- +
{{seecompattable}}{{CSSRef}} 
+ +
CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
+ +

最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。

+ +
+

注意：在shadow DOM之外使用时，这没有任何效果。

+
+ +
/* 选择阴影根元素，仅当它与选择器参数匹配 */
+ :host(.special-custom-element) {
+   font-weight: bold;
+ }
+ +

句法

+ +{{csssyntax}} + +

例子

+ + + +

以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

+ +

在这个例子中，有一个简单的自定义元素 <context-span> 可以用它包裹文本：

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

在元素的构造函数中，创建style和span元素，填充span自定义元素的内容，并style使用一些 CSS 规则填充元素：

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host(.footer) { color : red; } 规则为文档中所有在其上设置了 footer 类的<context-span> 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。

+ +

产品规格

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#host-selector', ':host()') }}{{ Spec2('CSS Scope') }}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/attr()/index.html b/files/zh-cn/web/css/attr()/index.html deleted file mode 100644 index 57df054434..0000000000 --- a/files/zh-cn/web/css/attr()/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - CSS Function - - attr Function -translation_of: Web/CSS/attr() ---- -
-
{{ CSSRef() }}
-
- -

概述

- -
-

注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

- -

译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

-
- -

CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

- -

attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

- -

用法

- -
语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
- -

解释

- -
-
attribute-name
-
是CSS所引用的HTML属性名称。
-
<type-or-unit>
-
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
关键字类型备注默认值
string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
- 前缀与后缀空格将被截掉。		当前颜色
url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
- 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
- 前缀与后缀空格将被截掉。		URL about:invalid，表示资源不存在。
integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
- 若属性值是一个相对长度， attr()会将其计算为绝对长度。
- 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} -

属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
- 若属性值是一个相对长度， attr()会将其计算为绝对长度。
- 前缀与后缀空格将被截掉。

- 		0，或该属性允许的最小值（如果0是不合法的值）。
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
- 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
% {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
- 若属性值用作长度，attr()将其计算为绝对长度。
- 前缀与后缀空格将被截掉。		0%，或该属性允许的最小值（如果0%是不合法的值）。
-
-
<fallback>
-
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
-
- -

示例

- -
p:before {
-    content:attr(data-foo) " ";
-}
-
- -
<p data-foo="hello">world</p>
-
- -

结果

- -

hello world

- - - -

示例1

- -

HTML

- -
<p data-foo="hello">world</p>
- -

CSS

- -
[data-foo]::before {
-  content: attr(data-foo) " ";
-}
- -

Result

- -

{{EmbedLiveSample("示例1", "100%", 50)}}

- - - -

示例2

- -

{{SeeCompatTable}}

- -

HTML

- -
<div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
- -

CSS

- -
.background {
-  height: 100vh;
-}
- -
.background {
-  background-color: red;
-}
-
-.background[data-background] {
-  background-color: attr(data-background color, red);
-}
- -

{{EmbedLiveSample("示例2", "100%", 50)}}

- - - - - -

规范

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
No changes.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} -

Added two optional parameters;
- can be used on all properties;
- may return values other than {{CSSxRef("<string>")}}.

- These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
- always returns a {{CSSxRef("<string>")}}.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
- -

浏览器兼容性

- -

{{Compat("css.types.attr")}}

- -

参见

- - diff --git a/files/zh-cn/web/css/attr/index.html b/files/zh-cn/web/css/attr/index.html new file mode 100644 index 0000000000..1391a4e599 --- /dev/null +++ b/files/zh-cn/web/css/attr/index.html @@ -0,0 +1,304 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - CSS Function + - attr Function +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
+
{{ CSSRef() }}
+
+ +

概述

+ +
+

注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

+ +

译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

+
+ +

CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

+ +

attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

+ +

用法

+ +
语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

解释

+ +
+
attribute-name
+
是CSS所引用的HTML属性名称。
+
<type-or-unit>
+
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
关键字类型备注默认值
string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
+ 前缀与后缀空格将被截掉。		当前颜色
url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
+ 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
+ 前缀与后缀空格将被截掉。		URL about:invalid，表示资源不存在。
integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} +

属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。

+ 		0，或该属性允许的最小值（如果0是不合法的值）。
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
% {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
+ 若属性值用作长度，attr()将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0%，或该属性允许的最小值（如果0%是不合法的值）。
+
+
<fallback>
+
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
+
+ +

示例

+ +
p:before {
+    content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

结果

+ +

hello world

+ + + +

示例1

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

Result

+ +

{{EmbedLiveSample("示例1", "100%", 50)}}

+ + + +

示例2

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
+ +

CSS

+ +
.background {
+  height: 100vh;
+}
+ +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+ +

{{EmbedLiveSample("示例2", "100%", 50)}}

+ + + + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
No changes.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

Added two optional parameters;
+ can be used on all properties;
+ may return values other than {{CSSxRef("<string>")}}.

+ These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
+ always returns a {{CSSxRef("<string>")}}.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
+ +

浏览器兼容性

+ +

{{Compat("css.types.attr")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/calc()/index.html b/files/zh-cn/web/css/calc()/index.html deleted file mode 100644 index 767e67f0c7..0000000000 --- a/files/zh-cn/web/css/calc()/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS Function - - CSS 函数 - - CSS3 - - Calculate - - Layout - - calc -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("<length>")}}、{{cssxref("<frequency>")}}, {{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、或 {{cssxref("<integer>")}}。

- -

语法

- -
/* property: calc(expression) */
-width: calc(100% - 80px);
- -

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

- -
-
+
-
加法。
-
-
-
减法。
-
*
-
乘法，乘数中至少有一个是 {{cssxref("<number>")}}。
-
/
-
除法，除数（/ 右面的数）必须是 {{cssxref("<number>")}}。
-
- -

表达式中的运算对象可以使用任意 {{cssxref("<length>")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

- -

备注

- - - -

形式化语法

- -{{csssyntax}} - -

例子

- -

使用指定的外边距定位一个对象

- -

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
- -
<div class="banner">This is a banner!</div>
- -

{{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}

- -

自动调整表单域的大小以适应其容器的大小

- -

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

- -

看一下下面的CSS：

- -
input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

- -
<form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
- -
{{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}
- -

使用 CSS 变量嵌套使用 calc()

- -

我们来看一下下面的代码：

- -
.foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
- -

在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

- -

无障碍相关考量

- -

当 calc() 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

这可以保证文本的大小会跟随页面一同缩放。

- - - -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初步定义
- -

浏览器兼容性

- - - -
{{Compat("css.types.calc")}}
- -

也可以看看

- - diff --git a/files/zh-cn/web/css/calc/index.html b/files/zh-cn/web/css/calc/index.html new file mode 100644 index 0000000000..99372f7cef --- /dev/null +++ b/files/zh-cn/web/css/calc/index.html @@ -0,0 +1,164 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS Function + - CSS 函数 + - CSS3 + - Calculate + - Layout + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("<length>")}}、{{cssxref("<frequency>")}}, {{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、或 {{cssxref("<integer>")}}。

+ +

语法

+ +
/* property: calc(expression) */
+width: calc(100% - 80px);
+ +

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

+ +
+
+
+
加法。
+
-
+
减法。
+
*
+
乘法，乘数中至少有一个是 {{cssxref("<number>")}}。
+
/
+
除法，除数（/ 右面的数）必须是 {{cssxref("<number>")}}。
+
+ +

表达式中的运算对象可以使用任意 {{cssxref("<length>")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

+ +

备注

+ + + +

形式化语法

+ +{{csssyntax}} + +

例子

+ +

使用指定的外边距定位一个对象

+ +

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}

+ +

自动调整表单域的大小以适应其容器的大小

+ +

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

+ +

看一下下面的CSS：

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +
{{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}
+ +

使用 CSS 变量嵌套使用 calc()

+ +

我们来看一下下面的代码：

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

+ +

无障碍相关考量

+ +

当 calc() 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

这可以保证文本的大小会跟随页面一同缩放。

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初步定义
+ +

浏览器兼容性

+ + + +
{{Compat("css.types.calc")}}
+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/clamp()/index.html b/files/zh-cn/web/css/clamp()/index.html deleted file mode 100644 index fd293c2620..0000000000 --- a/files/zh-cn/web/css/clamp()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -translation_of: Web/CSS/clamp() ---- -
{{CSSRef}}
- - - -

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。

- -

clamp(MIN, VAL, MAX) 其实就是表示 {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

- -
{{EmbedInteractiveExample("pages/css/function-clamp.html")}}
- - - -

示例中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

- -

语法

- -

clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

- -

当首选值比最小值要小时，则使用最小值。

- -

当首选值介于最小值和最大值之间时，用首选值。

- -

当首选值比最大值要大时，则使用最大值。

- -

这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("<length>")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。

- -

表达式中的每一个值都可以用不同的单位。

- -

注意

- - - -

形式语法

- -{{CSSSyntax}} - -

示例

- -

min, max, and clamp comparison

- -

这个示例中，我们用 min()、max() 和 clamp() 实现一个简单的响应式效果。

- -

<body> 元素的 width 设置为 min(1000px, calc(70% + 100px))。其含义是宽度设置为  1000px，当 calc(70% + 100px) 比  1000px 小时，宽度为 calc(70% + 100px) 。 min() 允许你设置一个上限值。

- -

 <p> 元素的 font-size 设置为 max(1.2rem, 1.2vw)。其含义是 font-size 是 1.2rem，当计算出 1.2vw 比 1.2rem 大时，则 font-size 为  1.2vw 。 max() 允许你设置一个下限值。

- -

<h1> 元素的 font-size 设置为 clamp(1.8rem, 2.5vw, 2.8rem).。其含义是 font-size 为 1.8rem，当计算出 2.5vw 比 1.8rem  大时，font-size 为 2.5vw，同时，当 2.5vw 计算出来的值比 2.8rem 大时，font-size 为 2.8rem。clamp() 允许你设置一个上限值和下限值。

- -

感兴趣可以在 GitHub 上查看源码

- -

HTML

- -
<h1>Simple responsive test</h1>
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
-
-<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
- -

CSS

- -
html {
-  font-family: sans-serif;
-}
-
-body {
-  margin: 0 auto;
-  width: min(1000px, calc(70% + 100px));
-}
-
-h1 {
-  letter-spacing: 2px;
-  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
-}
-
-p {
-  line-height: 1.5;
-  font-size: max(1.2rem, 1.2vw);
-}
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
- -

浏览器兼容性

- - - -

{{Compat("css.types.clamp")}}

- -

继续阅读

- - diff --git a/files/zh-cn/web/css/clamp/index.html b/files/zh-cn/web/css/clamp/index.html new file mode 100644 index 0000000000..cdf0f6b212 --- /dev/null +++ b/files/zh-cn/web/css/clamp/index.html @@ -0,0 +1,122 @@ +--- +title: clamp() +slug: Web/CSS/clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +--- +
{{CSSRef}}
+ + + +

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。

+ +

clamp(MIN, VAL, MAX) 其实就是表示 {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

+ +
{{EmbedInteractiveExample("pages/css/function-clamp.html")}}
+ + + +

示例中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

+ +

语法

+ +

clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

+ +

当首选值比最小值要小时，则使用最小值。

+ +

当首选值介于最小值和最大值之间时，用首选值。

+ +

当首选值比最大值要大时，则使用最大值。

+ +

这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("<length>")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。

+ +

表达式中的每一个值都可以用不同的单位。

+ +

注意

+ + + +

形式语法

+ +{{CSSSyntax}} + +

示例

+ +

min, max, and clamp comparison

+ +

这个示例中，我们用 min()、max() 和 clamp() 实现一个简单的响应式效果。

+ +

<body> 元素的 width 设置为 min(1000px, calc(70% + 100px))。其含义是宽度设置为  1000px，当 calc(70% + 100px) 比  1000px 小时，宽度为 calc(70% + 100px) 。 min() 允许你设置一个上限值。

+ +

 <p> 元素的 font-size 设置为 max(1.2rem, 1.2vw)。其含义是 font-size 是 1.2rem，当计算出 1.2vw 比 1.2rem 大时，则 font-size 为  1.2vw 。 max() 允许你设置一个下限值。

+ +

<h1> 元素的 font-size 设置为 clamp(1.8rem, 2.5vw, 2.8rem).。其含义是 font-size 为 1.8rem，当计算出 2.5vw 比 1.8rem  大时，font-size 为 2.5vw，同时，当 2.5vw 计算出来的值比 2.8rem 大时，font-size 为 2.8rem。clamp() 允许你设置一个上限值和下限值。

+ +

感兴趣可以在 GitHub 上查看源码

+ +

HTML

+ +
<h1>Simple responsive test</h1>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
+
+<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: min(1000px, calc(70% + 100px));
+}
+
+h1 {
+  letter-spacing: 2px;
+  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
+}
+
+p {
+  line-height: 1.5;
+  font-size: max(1.2rem, 1.2vw);
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.clamp")}}

+ +

继续阅读

+ + diff --git a/files/zh-cn/web/css/counter()/index.html b/files/zh-cn/web/css/counter()/index.html deleted file mode 100644 index e8cfc3ce91..0000000000 --- a/files/zh-cn/web/css/counter()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - CSS函数 - - CSS计数器 -translation_of: Web/CSS/counter() ---- -
{{CSSRef}}
- -
CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
- -
/* 简单使用 */
-counter(计数器名称);
-
-/* 更改计数器显示 */
-counter(countername, upper-roman)
- -

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

- -
-

注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

- -

在使用此功能之前，请仔细检查浏览器兼容性表。

-
- -

语法

- -

值

- -
-
<custom-ident> 自定义标识
-
一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
-
<counter-style> 计数器样式
-
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
-
- -

正式语法

- -
counter( <custom-ident>, <counter-style>? )
-
-where
-<counter-style> = <counter-style-name> | symbols()
-
-where
-<counter-style-name> = <custom-ident>
- -

示例

- - -

default value compared to upper Roman

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::after {
-  content: "[" counter(listCounter) "] == ["
-               counter(listCounter, upper-roman) "]";
-}
- -

结果

- -

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

- -

decimal-leading-zero compared to lower-alpha

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::after {
-  content: "[" counter(count, decimal-leading-zero) "] == ["
-               counter(count, lower-alpha) "]";
-}
- -

结果

- -

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
Specification状态注释
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
- -

浏览器兼容性

- - - -

{{Compat("css.types.counter")}}

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/counter/index.html b/files/zh-cn/web/css/counter/index.html new file mode 100644 index 0000000000..ecdb339151 --- /dev/null +++ b/files/zh-cn/web/css/counter/index.html @@ -0,0 +1,146 @@ +--- +title: counter() +slug: Web/CSS/counter +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counter() +original_slug: Web/CSS/counter() +--- +
{{CSSRef}}
+ +
CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
+ +
/* 简单使用 */
+counter(计数器名称);
+
+/* 更改计数器显示 */
+counter(countername, upper-roman)
+ +

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

+ +
+

注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

+ +

在使用此功能之前，请仔细检查浏览器兼容性表。

+
+ +

语法

+ +

值

+ +
+
<custom-ident> 自定义标识
+
一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
+
<counter-style> 计数器样式
+
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
+
+ +

正式语法

+ +
counter( <custom-ident>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
+ +

示例

+ + +

default value compared to upper Roman

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero compared to lower-alpha

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
Specification状态注释
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.counter")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/counters()/index.html b/files/zh-cn/web/css/counters()/index.html deleted file mode 100644 index c758a6a3ad..0000000000 --- a/files/zh-cn/web/css/counters()/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - CSS函数 - - CSS计数器 -translation_of: Web/CSS/counters() ---- -
{{CSSRef}}
- -

CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

- -
/* Simple usage  - style defaults to decimal */
-counters(countername, '-');
-
-/* changing the counter display */
-counters(countername, '.', upper-roman)
- -

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

- -
-

Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

- -

在使用此功能之前，请仔细检查浏览器兼容性表 。

-
- -

Syntax

- -

Values

- -
-
<custom-ident> 自定义标识
-
一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
-
<counter-style> 计数器样式
-
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
-
<string> 字符串
-
任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。
-
- -

Formal syntax

- -
counters( <custom-ident>, <string>, <counter-style>? )
-
-where
-<counter-style> = <counter-style-name> | symbols()
-
-where
-<counter-style-name> = <custom-ident>
- -

Examples

- -

default value compared to upper Roman

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::marker {
-   content:  counters(listCounter, '.', upper-roman) ') ';
-}
-li::before {
-  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
-}
- -

Result

- -

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

- -

decimal-leading-zero compared to lower-alpha

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::marker {
-   content: counters(count, '.', upper-alpha) ') ';
-}
-li::before {
-  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
-}
- -

Result

- -

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.types.counters")}}

- -

See also

- - diff --git a/files/zh-cn/web/css/counters/index.html b/files/zh-cn/web/css/counters/index.html new file mode 100644 index 0000000000..30662705ca --- /dev/null +++ b/files/zh-cn/web/css/counters/index.html @@ -0,0 +1,189 @@ +--- +title: counters() +slug: Web/CSS/counters +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counters() +original_slug: Web/CSS/counters() +--- +
{{CSSRef}}
+ +

CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

+ +
/* Simple usage  - style defaults to decimal */
+counters(countername, '-');
+
+/* changing the counter display */
+counters(countername, '.', upper-roman)
+ +

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

+ +
+

Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

+ +

在使用此功能之前，请仔细检查浏览器兼容性表 。

+
+ +

Syntax

+ +

Values

+ +
+
<custom-ident> 自定义标识
+
一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
+
<counter-style> 计数器样式
+
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
+
<string> 字符串
+
任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。
+
+ +

Formal syntax

+ +
counters( <custom-ident>, <string>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
+ +

Examples

+ +

default value compared to upper Roman

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}
+ +

Result

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero compared to lower-alpha

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+ +

Result

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.types.counters")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/element()/index.html b/files/zh-cn/web/css/element()/index.html deleted file mode 100644 index 57873c6e7d..0000000000 --- a/files/zh-cn/web/css/element()/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - CSS - - CSS Function - - Layout - - Web - - 参考 - - 布局 -translation_of: Web/CSS/element() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 {{cssxref("<image>")}} 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

- -

一个特别实用的应用场景是，在某个 HTML {{HTMLElement("canvas")}} 元素中渲染图像，然后将其用作背景。

- -

在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 {{domxref("document.mozSetImageElement()")}} 方法，将某个元素指定为其他元素的背景图像。

- -

语法

- -
element(id)
- -

其中：

- -
-
id
-
The ID of an element to use as the background, specified using the HTML attribute #id on the element.
-
- -

示例

- -

在支持 -moz-element() 的 Firefox 中，可以实地考察这些例子。

- -

一个比较现实的例子

- -

这个例子将文档中另一个隐藏的 {{HTMLElement("div")}} 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

- -
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
- -

The {{HTMLElement("div")}} element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

- -

example1.png

- -

一个有点怪怪的例子

- -

This example uses a hidden {{HTMLElement("button")}} element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

- -
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
- -

example2.png

- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Deferred from CSS3 Images.
- -

浏览器兼容性

- - - -

{{Compat("css.types.image.element")}}

- -

参见

- - diff --git a/files/zh-cn/web/css/element/index.html b/files/zh-cn/web/css/element/index.html new file mode 100644 index 0000000000..70a8b5c5f3 --- /dev/null +++ b/files/zh-cn/web/css/element/index.html @@ -0,0 +1,104 @@ +--- +title: element +slug: Web/CSS/element +tags: + - CSS + - CSS Function + - Layout + - Web + - 参考 + - 布局 +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 {{cssxref("<image>")}} 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

+ +

一个特别实用的应用场景是，在某个 HTML {{HTMLElement("canvas")}} 元素中渲染图像，然后将其用作背景。

+ +

在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 {{domxref("document.mozSetImageElement()")}} 方法，将某个元素指定为其他元素的背景图像。

+ +

语法

+ +
element(id)
+ +

其中：

+ +
+
id
+
The ID of an element to use as the background, specified using the HTML attribute #id on the element.
+
+ +

示例

+ +

在支持 -moz-element() 的 Firefox 中，可以实地考察这些例子。

+ +

一个比较现实的例子

+ +

这个例子将文档中另一个隐藏的 {{HTMLElement("div")}} 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

The {{HTMLElement("div")}} element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

+ +

example1.png

+ +

一个有点怪怪的例子

+ +

This example uses a hidden {{HTMLElement("button")}} element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Deferred from CSS3 Images.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.image.element")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/env()/index.html b/files/zh-cn/web/css/env()/index.html deleted file mode 100644 index 60f45d0e97..0000000000 --- a/files/zh-cn/web/css/env()/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - env - - env() - - iPhoneX -translation_of: Web/CSS/env() ---- -
{{CSSRef}}
- -
 env() CSS 函数以类似于 {{cssxref("var")}} 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。
- - - -
为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
- -
-
<meta name="viewport" content="... viewport-fit=cover">
-
- -
body {
-  padding:
-    env(safe-area-inset-top, 20px)
-    env(safe-area-inset-right, 20px)
-    env(safe-area-inset-bottom, 20px)
-    env(safe-area-inset-left, 20px);
-}
- -

另外，与自定义属性不同，自定义属性不能在声明之外使用，而env()函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。 随着规范的发展，它也可能在像是 选择器 等其他地方使用。

- -

最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

- -

语法

- -
/* Using the four safe area inset values with no fallback values */
-env(safe-area-inset-top);
-env(safe-area-inset-right);
-env(safe-area-inset-bottom);
-env(safe-area-inset-left);
-
-/* Using them with fallback values */
-env(safe-area-inset-top, 20px);
-env(safe-area-inset-right, 1em);
-env(safe-area-inset-bottom, 0.5vh);
-env(safe-area-inset-left, 1.4rem);
-
- -

Values

- -
-
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
-
safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
-
- -

注意: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

- -

Formal syntax

- -{{CSSSyntax}} - -

Examples

- -

下面的示例使用env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

- -
<p>
-  If the <code>env()</code> function is supported in your browser,
-  this paragraph’s text will have 50px of padding between it and
-  the left border — but not the top, right and bottom.
-  This is because the accompanying CSS is the equivalent of
-  <code>padding: 0 0 0 50px</code>, because, unlike other CSS
-  properties, user agent property names are case-sensitive.
-</p>
- -
p {
-  width: 300px;
-  border: 2px solid red;
-  padding:
-    env(safe-area-inset-top, 50px)
-    env(safe-area-inset-right, 50px)
-    env(safe-area-inset-bottom, 50px)
-    env(SAFE-AREA-INSET-LEFT, 50px);
-}
- -

{{EmbedLiveSample("Examples")}}

- -

Example values

- -
padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
-padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
-padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
-padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
-
- -

向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

- -

Note: User agent properties are not reset by the all property.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("css.properties.custom-property.env")}}

- -

See also

- - diff --git a/files/zh-cn/web/css/env/index.html b/files/zh-cn/web/css/env/index.html new file mode 100644 index 0000000000..c8983fb967 --- /dev/null +++ b/files/zh-cn/web/css/env/index.html @@ -0,0 +1,134 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - env + - env() + - iPhoneX +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +
{{CSSRef}}
+ +
 env() CSS 函数以类似于 {{cssxref("var")}} 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。
+ + + +
为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
+ +
+
<meta name="viewport" content="... viewport-fit=cover">
+
+ +
body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+ +

另外，与自定义属性不同，自定义属性不能在声明之外使用，而env()函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。 随着规范的发展，它也可能在像是 选择器 等其他地方使用。

+ +

最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

+ +

语法

+ +
/* Using the four safe area inset values with no fallback values */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Using them with fallback values */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+
+ +

Values

+ +
+
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
+
safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
+
+ +

注意: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

+ +

Formal syntax

+ +{{CSSSyntax}} + +

Examples

+ +

下面的示例使用env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

+ +
<p>
+  If the <code>env()</code> function is supported in your browser,
+  this paragraph’s text will have 50px of padding between it and
+  the left border — but not the top, right and bottom.
+  This is because the accompanying CSS is the equivalent of
+  <code>padding: 0 0 0 50px</code>, because, unlike other CSS
+  properties, user agent property names are case-sensitive.
+</p>
+ +
p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}
+ +

{{EmbedLiveSample("Examples")}}

+ +

Example values

+ +
padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
+padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
+padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
+padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
+
+ +

向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

+ +

Note: User agent properties are not reset by the all property.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.custom-property.env")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/filter-function/blur()/index.html b/files/zh-cn/web/css/filter-function/blur()/index.html deleted file mode 100644 index 693f0a5bbe..0000000000 --- a/files/zh-cn/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
- - - -

语法

- -
blur(radius)
- -

值

- -
-
radius
-
模糊的半径，值为{{cssxref("<length>")}}。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
-
- -

示例

- -
blur(0)        /* No effect */
-blur(8px)      /* Blur with 8px radius */
-blur(1.17rem)  /* Blur with 1.17rem radius */
- -

参见

- - diff --git a/files/zh-cn/web/css/filter-function/blur/index.html b/files/zh-cn/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..16db8075c1 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/blur/index.html @@ -0,0 +1,50 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

语法

+ +
blur(radius)
+ +

值

+ +
+
radius
+
模糊的半径，值为{{cssxref("<length>")}}。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
+
+ +

示例

+ +
blur(0)        /* No effect */
+blur(8px)      /* Blur with 8px radius */
+blur(1.17rem)  /* Blur with 1.17rem radius */
+ +

参见

+ + diff --git a/files/zh-cn/web/css/filter-function/brightness()/index.html b/files/zh-cn/web/css/filter-function/brightness()/index.html deleted file mode 100644 index f7ec2f77d5..0000000000 --- a/files/zh-cn/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -translation_of: Web/CSS/filter-function/brightness() ---- -
{{cssref}}
- -

brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。 结果是一个{{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
- - - -

语法

- -
brightness(amount)
- -

值

- -
-
amount
-
输出的亮度值取决于{{cssxref("<number>")}}或{{cssxref("<percentage>")}}的大小. 低于100% 的值会使图片变暗, 超过100%的值将会使其变亮.当值为0%时将会创建一个全黑的图像, 当值为100%时不会有任何变化. 该值为空时默认为1.
-
- -

例子

- -
brightness(0%)   /* 全黑 */
-brightness(0.4)  /* 40% 亮度 */
-brightness(1)    /* 无效果 */
-brightness(200%) /* 两倍亮度 */
- -

参见

- - diff --git a/files/zh-cn/web/css/filter-function/brightness/index.html b/files/zh-cn/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..2ef73de214 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/brightness/index.html @@ -0,0 +1,37 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。 结果是一个{{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

语法

+ +
brightness(amount)
+ +

值

+ +
+
amount
+
输出的亮度值取决于{{cssxref("<number>")}}或{{cssxref("<percentage>")}}的大小. 低于100% 的值会使图片变暗, 超过100%的值将会使其变亮.当值为0%时将会创建一个全黑的图像, 当值为100%时不会有任何变化. 该值为空时默认为1.
+
+ +

例子

+ +
brightness(0%)   /* 全黑 */
+brightness(0.4)  /* 40% 亮度 */
+brightness(1)    /* 无效果 */
+brightness(200%) /* 两倍亮度 */
+ +

参见

+ + diff --git a/files/zh-cn/web/css/filter-function/contrast()/index.html b/files/zh-cn/web/css/filter-function/contrast()/index.html deleted file mode 100644 index e03364015d..0000000000 --- a/files/zh-cn/web/css/filter-function/contrast()/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -translation_of: Web/CSS/filter-function/contrast() ---- -
{{cssref}}
- -

contrast() CSS 函数调整输入图像的对比度. 结果是一个 {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
- - - -

语法

- -
contrast(amount)
- -

参数

- -
-
amount
-
输出的对比度取决于 {{cssxref("<number>")}}或者{{cssxref("<percentage>")}}的大小. 低于 100%  的值会降低对比度, 高于 100% 的值会增加对比度. 值为 0% 将创建完全灰色的图像, 值为 100% 时不会有任何变化. 该值为空时默认为 1.
-
- -

例子

- -
contrast(0)     /* 完全灰色 */
-contrast(65%)   /* 65% 对比度 */
-contrast(1)     /* 无效果 */
-contrast(200%)  /* 两倍对比度 */
- -

参见

- - diff --git a/files/zh-cn/web/css/filter-function/contrast/index.html b/files/zh-cn/web/css/filter-function/contrast/index.html new file mode 100644 index 0000000000..b1f92f421f --- /dev/null +++ b/files/zh-cn/web/css/filter-function/contrast/index.html @@ -0,0 +1,46 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() CSS 函数调整输入图像的对比度. 结果是一个 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

语法

+ +
contrast(amount)
+ +

参数

+ +
+
amount
+
输出的对比度取决于 {{cssxref("<number>")}}或者{{cssxref("<percentage>")}}的大小. 低于 100%  的值会降低对比度, 高于 100% 的值会增加对比度. 值为 0% 将创建完全灰色的图像, 值为 100% 时不会有任何变化. 该值为空时默认为 1.
+
+ +

例子

+ +
contrast(0)     /* 完全灰色 */
+contrast(65%)   /* 65% 对比度 */
+contrast(1)     /* 无效果 */
+contrast(200%)  /* 两倍对比度 */
+ +

参见

+ + diff --git a/files/zh-cn/web/css/filter-function/drop-shadow()/index.html b/files/zh-cn/web/css/filter-function/drop-shadow()/index.html deleted file mode 100644 index 7875c9932f..0000000000 --- a/files/zh-cn/web/css/filter-function/drop-shadow()/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -translation_of: Web/CSS/filter-function/drop-shadow() ---- -
{{cssref}}
- -

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
- - - -

投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

- -
-

注意: 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

-
- -

Syntax

- -
drop-shadow(offset-x offset-y blur-radius spread-radius color)
- -

The drop-shadow() function accepts a parameter of type <shadow> (defined in the {{cssxref("box-shadow")}} property), with the exception that the inset keyword is not allowed.

- -

Parameters

- -
-
offset-x offset-y (required)
-
offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
-
blur-radius (optional)
-
阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
-
spread-radius (optional)
-
阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。
-
-
大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持
-
-
color (optional)
-
阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
-
- -

Examples

- -
/* Black shadow with 10px blur */
-drop-shadow(16px 16px 10px black)
-
-/* Reddish shadow with 1rem blur and .3rem spread */
-/* WARNING: not generally supported by browsers */
-drop-shadow(.5rem .5rem 1rem .3rem #e23)
- -

See also

- - diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.html b/files/zh-cn/web/css/filter-function/drop-shadow/index.html new file mode 100644 index 0000000000..6d43817560 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.html @@ -0,0 +1,66 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow +translation_of: Web/CSS/filter-function/drop-shadow() +original_slug: Web/CSS/filter-function/drop-shadow() +--- +
{{cssref}}
+ +

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
+ + + +

投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

+ +
+

注意: 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

+
+ +

Syntax

+ +
drop-shadow(offset-x offset-y blur-radius spread-radius color)
+ +

The drop-shadow() function accepts a parameter of type <shadow> (defined in the {{cssxref("box-shadow")}} property), with the exception that the inset keyword is not allowed.

+ +

Parameters

+ +
+
offset-x offset-y (required)
+
offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
+
blur-radius (optional)
+
阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
+
spread-radius (optional)
+
阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。
+
+
大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持
+
+
color (optional)
+
阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
+
+ +

Examples

+ +
/* Black shadow with 10px blur */
+drop-shadow(16px 16px 10px black)
+
+/* Reddish shadow with 1rem blur and .3rem spread */
+/* WARNING: not generally supported by browsers */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)
+ +

See also

+ + diff --git a/files/zh-cn/web/css/filter-function/grayscale()/index.html b/files/zh-cn/web/css/filter-function/grayscale()/index.html deleted file mode 100644 index 6f7793c6b0..0000000000 --- a/files/zh-cn/web/css/filter-function/grayscale()/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -translation_of: Web/CSS/filter-function/grayscale() ---- -
{{cssref}}
- -

grayscale() : 对图片进行灰度转换, 它是 {{cssxref("<filter-function>")}} 的子属性.

- -
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
- - - -

语法

- -
grayscale(amount)
- -

参数

- -
-
amount
-
转换值的大小, 可以是{{cssxref("<number>")}} 或 {{cssxref("<percentage>")}}. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时使用值为1.
-
- -

例子

- -
grayscale(0)     /* 无效果 */
-grayscale(.7)    /* 70% 灰度 */
-grayscale(100%)  /* 灰度最大 */
- -

更多

- - diff --git a/files/zh-cn/web/css/filter-function/grayscale/index.html b/files/zh-cn/web/css/filter-function/grayscale/index.html new file mode 100644 index 0000000000..da30a13478 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/grayscale/index.html @@ -0,0 +1,36 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +--- +
{{cssref}}
+ +

grayscale() : 对图片进行灰度转换, 它是 {{cssxref("<filter-function>")}} 的子属性.

+ +
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
+ + + +

语法

+ +
grayscale(amount)
+ +

参数

+ +
+
amount
+
转换值的大小, 可以是{{cssxref("<number>")}} 或 {{cssxref("<percentage>")}}. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时使用值为1.
+
+ +

例子

+ +
grayscale(0)     /* 无效果 */
+grayscale(.7)    /* 70% 灰度 */
+grayscale(100%)  /* 灰度最大 */
+ +

更多

+ + diff --git a/files/zh-cn/web/css/filter-function/opacity()/index.html b/files/zh-cn/web/css/filter-function/opacity()/index.html deleted file mode 100644 index 877b0dcf4e..0000000000 --- a/files/zh-cn/web/css/filter-function/opacity()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -translation_of: Web/CSS/filter-function/opacity() ---- -
{{cssref}}
- -

The opacity() CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
- - - -
-

Note: 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了filters，有些浏览器会提供硬件加速以获取更好的性能表现。

-
- -

语法

- -
opacity(amount)
- -

参数

- -
-
amount
-
转化的数值，要求是一个 {{cssxref("<number>")}} 或一个 {{cssxref("<percentage>")}}（百分比）。值为 0% 是完全透明的,值为100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。
-
- -

Examples

- -
opacity(0%)   /* 完全透明*/
-opacity(50%)  /* 50% 透明 */
-opacity(1)    /* 无效果 */
- -

See also

- - diff --git a/files/zh-cn/web/css/filter-function/opacity/index.html b/files/zh-cn/web/css/filter-function/opacity/index.html new file mode 100644 index 0000000000..df97b35a57 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/opacity/index.html @@ -0,0 +1,41 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +--- +
{{cssref}}
+ +

The opacity() CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
+ + + +
+

Note: 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了filters，有些浏览器会提供硬件加速以获取更好的性能表现。

+
+ +

语法

+ +
opacity(amount)
+ +

参数

+ +
+
amount
+
转化的数值，要求是一个 {{cssxref("<number>")}} 或一个 {{cssxref("<percentage>")}}（百分比）。值为 0% 是完全透明的,值为100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。
+
+ +

Examples

+ +
opacity(0%)   /* 完全透明*/
+opacity(50%)  /* 50% 透明 */
+opacity(1)    /* 无效果 */
+ +

See also

+ + diff --git a/files/zh-cn/web/css/gradient/linear-gradient()/index.html b/files/zh-cn/web/css/gradient/linear-gradient()/index.html deleted file mode 100644 index 670d14976a..0000000000 --- a/files/zh-cn/web/css/gradient/linear-gradient()/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/gradient/linear-gradient() -translation_of: Web/CSS/gradient/linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.linear-gradient - ---- -

{{CSSRef}}

- -

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。

- -
/* 渐变轴为45度，从蓝色渐变到红色 */
-linear-gradient(45deg, blue, red);
-
-/* 从右下到左上、从蓝色渐变到红色 */
-linear-gradient(to left top, blue, red);
-
-/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
-linear-gradient(0deg, blue, green 40%, red);
- -
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
- -

如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

- -
提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
- -
提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。
- -

线形渐变的构成

- -

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

- -

linear-gradient.png渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

- -

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

- -

同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

- -

关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

- -

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

- -

当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

- -
linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看
-
- -

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

- -

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

- -
linear-gradient(red 40%, yellow 30%, blue 65%);
- -

允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:

- -
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
-linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
-linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
- -

默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

- -

语法

- -

值

- -
-
<side-or-corner>
-
描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
- to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
-
<angle>
-
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
-
<linear-color-stop>
-
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
-
- -
-
<color-hint>
-
- -

颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 

- -
-
-
提示：渲染颜色中间点的规则 color stops in CSS gradients与一致 SVG gradients。
- -

正式语法

- - 
linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-  \---------------------------------/ \----------------------------/
-    Definition of the gradient line        List of color stops
-
-where <side-or-corner> = [ left | right ] || [ top | bottom ]
-  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  and <linear-color-stop> = <color> [ <color-stop-length> ]?
-  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  and <color-hint> = [ <percentage> | <length> ]
-
-
-
- -

语法历史

- -

linear-gradient的语法由2008年实施的first Apple proposal发展而来。

- -
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
- -

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

- -

一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

- -
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

- -

新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

- - - -

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

- -
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

{{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

- -
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

以上应当是最终语法。

- -

在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

- -

范例

- -

例 45度渐变

- -

可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

- -
<div style="width: 200px; height: 200px;"></div>
- -
div {
-  background: linear-gradient(45deg, red, blue);
-}
- -

{{EmbedLiveSample("45度渐变",120,120)}}

- -

从60％的梯度线开始的渐变

- -

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

- -
<div style="width: 200px; height: 200px;"></div>
- -
div {
-  background: linear-gradient(135deg, red, red 60%, blue);
-}
- -

Result:

- -

{{EmbedLiveSample("从60％的梯度线开始的渐变")}}

- -

具有多个颜色停止的渐变

- -

如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

- -

颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

- -
<div>A rainbow made from a gradient</div>
- -
div {
-  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-}
- -

Result:

- -

{{EmbedLiveSample("具有多个颜色停止的渐变")}}

- -

包含多个颜色中间点的渐变

- -

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

- -

颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

- -
使用渐变制作彩虹
- -
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-
- -

线性重复渐变

- -

线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。

- -

使用透明度

- -
<div>线性与透明度</div>
- -
div {
-  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
-}
- -

Result:

- -

{{EmbedLiveSample("使用透明度")}}

- -

如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

- -

跨浏览器实施渐变

- -

这里包含了所有前缀的渐变设置。

- -
.grad {
-  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
-}
-
- -

-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

- -
-

Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

-
- -

规范

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Add Interpolation hints
- -

浏览器兼容性

- -{{Compat("css.types.image.gradient.linear-gradient")}} - -

了解更多

- - diff --git a/files/zh-cn/web/css/gradient/linear-gradient/index.html b/files/zh-cn/web/css/gradient/linear-gradient/index.html new file mode 100644 index 0000000000..4636a644cd --- /dev/null +++ b/files/zh-cn/web/css/gradient/linear-gradient/index.html @@ -0,0 +1,281 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +

{{CSSRef}}

+ +

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。

+ +
/* 渐变轴为45度，从蓝色渐变到红色 */
+linear-gradient(45deg, blue, red);
+
+/* 从右下到左上、从蓝色渐变到红色 */
+linear-gradient(to left top, blue, red);
+
+/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
+linear-gradient(0deg, blue, green 40%, red);
+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
+ +

如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

+ +
提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
+ +
提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。
+ +

线形渐变的构成

+ +

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

+ +

linear-gradient.png渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

+ +

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

+ +

同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

+ +

关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

+ +

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

+ +

当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看
+
+ +

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

+ +

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+ +

允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+ +

默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

+ +

语法

+ +

值

+ +
+
<side-or-corner>
+
描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
+ to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
+
<angle>
+
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
+
<linear-color-stop>
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
+ +
+
<color-hint>
+
+ +

颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 

+ +
+
+
提示：渲染颜色中间点的规则 color stops in CSS gradients与一致 SVG gradients。
+ +

正式语法

+ + 
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [ left | right ] || [ top | bottom ]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+
+
+
+ +

语法历史

+ +

linear-gradient的语法由2008年实施的first Apple proposal发展而来。

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

+ +

一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

+ +

新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

+ + + +

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

{{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

以上应当是最终语法。

+ +

在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

+ +

范例

+ +

例 45度渐变

+ +

可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(45deg, red, blue);
+}
+ +

{{EmbedLiveSample("45度渐变",120,120)}}

+ +

从60％的梯度线开始的渐变

+ +

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
+ +

Result:

+ +

{{EmbedLiveSample("从60％的梯度线开始的渐变")}}

+ +

具有多个颜色停止的渐变

+ +

如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

+ +

颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

+ +
<div>A rainbow made from a gradient</div>
+ +
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+ +

Result:

+ +

{{EmbedLiveSample("具有多个颜色停止的渐变")}}

+ +

包含多个颜色中间点的渐变

+ +

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

+ +

颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

+ +
使用渐变制作彩虹
+ +
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
+ +

线性重复渐变

+ +

线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。

+ +

使用透明度

+ +
<div>线性与透明度</div>
+ +
div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}
+ +

Result:

+ +

{{EmbedLiveSample("使用透明度")}}

+ +

如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

+ +

跨浏览器实施渐变

+ +

这里包含了所有前缀的渐变设置。

+ +
.grad {
+  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
+}
+
+ +

-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

+ +
+

Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Add Interpolation hints
+ +

浏览器兼容性

+ +{{Compat("css.types.image.gradient.linear-gradient")}} + +

了解更多

+ + diff --git a/files/zh-cn/web/css/gradient/radial-gradient()/index.html b/files/zh-cn/web/css/gradient/radial-gradient()/index.html deleted file mode 100644 index cc5a4c79cd..0000000000 --- a/files/zh-cn/web/css/gradient/radial-gradient()/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/gradient/radial-gradient() -translation_of: Web/CSS/gradient/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.radial-gradient ---- -

{{CSSRef}}

- -

radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

- -

{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

- -

与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

- -

如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

- -

因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

- -

radial gradient 的组成

- -

径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

- -

为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

- -

色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

- -

语法

- -
/* A gradient at the center of its container,
-   starting red, changing to blue, and finishing green */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

值

- -
-
{{cssxref("<position>")}}
-
{{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。
-
<shape>
-
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
-
<size>
-
渐变的尺寸大小。包含的值见下表。
-
<color-stop>
-
表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
-
<extent-keyword>
-
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
-
- - - - - - - - - - - - - - - - - - - - - - - -
常量描述
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
- -
-

注意：该函数的早期实现还包含其他关键字（ cover 和 contain），分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

-
-
-
<linear-color-stop>
-
A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
-
<color-hint>
-
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
-
-

Formal syntax

- - 
radial-gradient(
-  [ [ circle || <length> ]                         [ at <position> ]? , |
-    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
-    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
-    at <position> ,
-  ]?
-  <color-stop-list> [ , <color-stop-list> ]+
-)
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-   and <linear-color-stop> = <color> [ <color-stop-length> ]?
-   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-   and <color-hint> = [ <percentage> | <length> ]
-
- -
-

Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

-
-
-
- -

示例

- -

Simple gradient

- - - -
.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

- -

Non-centered gradient

- - - -
.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

- -
-

Note: Please see Using CSS gradients for more examples.

-
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

浏览器兼容性

- - - -
{{Compat("css.types.image.gradient.radial-gradient")}}
- -

Quantum CSS notes

- -

Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

- -

另见

- - diff --git a/files/zh-cn/web/css/gradient/radial-gradient/index.html b/files/zh-cn/web/css/gradient/radial-gradient/index.html new file mode 100644 index 0000000000..8a739eb511 --- /dev/null +++ b/files/zh-cn/web/css/gradient/radial-gradient/index.html @@ -0,0 +1,197 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/gradient/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +

{{CSSRef}}

+ +

radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

+ +

{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

+ +

与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

+ +

如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

+ +

因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

+ +

radial gradient 的组成

+ +

径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

+ +

为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

+ +

色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

+ +

语法

+ +
/* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

值

+ +
+
{{cssxref("<position>")}}
+
{{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。
+
<shape>
+
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
+
<size>
+
渐变的尺寸大小。包含的值见下表。
+
<color-stop>
+
表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
+
<extent-keyword>
+
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
+
+ + + + + + + + + + + + + + + + + + + + + + + +
常量描述
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
+ +
+

注意：该函数的早期实现还包含其他关键字（ cover 和 contain），分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

+
+
+
<linear-color-stop>
+
A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
+
<color-hint>
+
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
+
+

Formal syntax

+ + 
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop-list> [ , <color-stop-list> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+
+ +
+

Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

+
+
+
+ +

示例

+ +

Simple gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

+ +

Non-centered gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

+ +
+

Note: Please see Using CSS gradients for more examples.

+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ + + +
{{Compat("css.types.image.gradient.radial-gradient")}}
+ +

Quantum CSS notes

+ +

Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

+ +

另见

+ + diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html deleted file mode 100644 index 007a1eb361..0000000000 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/gradient/repeating-linear-gradient() -translation_of: Web/CSS/gradient/repeating-linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-linear-gradient ---- -
{{CSSRef}}
- -

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

- -
/* 一个倾斜45度的重复线性渐变,
-   从蓝色开始渐变到红色 */
-repeating-linear-gradient(45deg, blue, red);
-
-/* 一个从右下角到左上角的重复线性渐变,
-   从蓝色开始渐变到红色 */
-repeating-linear-gradient(to left top, blue, red);
-
-/* 一个由下至上的重复线性渐变,
-   从蓝色开始，40%后变绿，
-   最后渐变到红色 */
-repeating-linear-gradient(0deg, blue, green 40%, red);
-
- -

 

- -

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

- -

与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

- -
-

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

-
- -

语法

- -

值

- -
-
<side-or-corner>
-
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。
-

- to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
-
{{cssxref("<angle>")}}
-
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
-
<color-stop>
-
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
-
-
-

提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

-
-
-
- -

形式语法

- -
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                            \---------------------------------/ \----------------------------/
-                              渐变轴的定义                                色标列表
-
-where <side-or-corner> = [left | right] || [top | bottom]
-   and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -

示例

- -
-
#grad1 {
-  background-image: repeating-linear-gradient(180deg,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-
-#grad2 {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 25px,
-      rgba(255,255,255,1) 25px,
-      rgba(255,255,255,1) 50px);
-}
-
- -
<ol>
-  <li>Repeating horizontal bars
-    <div id="grad1"></div>
-  </li>
-  <li>Zebra stripes
-    <div id="grad2"></div>
-  </li>
-</ol>
-
- - - -

{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}

- -

规格

- - - - - - - - - - - - - - - - -
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

浏览器兼容性

- -{{Compat("css.types.image.gradient.repeating-linear-gradient")}} - -

了解更多

- - diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html new file mode 100644 index 0000000000..b9e09acb59 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html @@ -0,0 +1,171 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/gradient/repeating-linear-gradient() +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +
{{CSSRef}}
+ +

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

+ +
/* 一个倾斜45度的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(45deg, blue, red);
+
+/* 一个从右下角到左上角的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(to left top, blue, red);
+
+/* 一个由下至上的重复线性渐变,
+   从蓝色开始，40%后变绿，
+   最后渐变到红色 */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+ +

 

+ +

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

+ +

与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+ +
+

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

+
+ +

语法

+ +

值

+ +
+
<side-or-corner>
+
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。
+

+ to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
+
{{cssxref("<angle>")}}
+
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
+
<color-stop>
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
+
+

提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

+
+
+
+ +

形式语法

+ +
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                            \---------------------------------/ \----------------------------/
+                              渐变轴的定义                                色标列表
+
+where <side-or-corner> = [left | right] || [top | bottom]
+   and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

示例

+ +
+
#grad1 {
+  background-image: repeating-linear-gradient(180deg,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+#grad2 {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 25px,
+      rgba(255,255,255,1) 25px,
+      rgba(255,255,255,1) 50px);
+}
+
+ +
<ol>
+  <li>Repeating horizontal bars
+    <div id="grad1"></div>
+  </li>
+  <li>Zebra stripes
+    <div id="grad2"></div>
+  </li>
+</ol>
+
+ + + +

{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ +{{Compat("css.types.image.gradient.repeating-linear-gradient")}} + +

了解更多

+ + diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html deleted file mode 100644 index f3ac84767e..0000000000 --- a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/gradient/repeating-radial-gradient() -translation_of: Web/CSS/gradient/repeating-radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-radial-gradient ---- -
{{CSSRef}}
- -

CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

- -
/* 一个从容器中心点开始的重复渐变,
-   从红色开始，渐变到蓝色，再渐变到绿色 */
-repeating-radial-gradient(circle at center, red 0, blue, green 30px);
-
- -

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

- -

与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

- -
-

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

-
- -

语法

- -

值

- -
-
{{cssxref("<position>")}}
-
position与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 center.
-
{{cssxref("<angle>")}}
-
渐变轴的角度。角度顺时针增加，默认值为0deg。
-
{{cssxref("<shape>")}}
-
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。
-
<extent-keyword>
-
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
-
- - - - - - - - - - - - - - - - - - - - - - - -
KeywordDescription
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
- -
-

提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

-
-
-
<color-stop>
-
表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
-
- -

形式语法

- -
repeating-radial-gradient(
-       [[ circle  || <length> ]                     [at <position>]? , |
-        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
-        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
-                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
-        \---------------------------------------------------------------/\--------------------------------/
-                  定义轮廓、尺寸和结束形状的位置                                    色标列表
-
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  and <color-stop> = <color> [ <percentage> | <length> ]?
- -

示例

- -

径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

- -

黑白相间的渐变

- - -
div {
-  display: block;
-  width: 50%;
-  height: 80px;
-  border-color: #000000;
-  padding: 10px;
-}
-#grad1 {
-  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  text-shadow: 1px 1px 0pt black;
-  color: white;
-  border: 1px solid black;
-  height:5.5em;
-}
-
- -

{{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}

- -
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
- -

Farthest-corner渐变

- - -
div {
-  display: block;
-  width: 50%;
-  height: 80px;
-  border-radius: 10px;
-  border-color: #000000;
-  padding: 10px;
-}
-#grad1 {
-  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  text-shadow: 1px 1px 0pt blue;
-  color: white;
-  border: 1px solid black;
-  height:5.5em;
-}
-
- -

{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}

- -
background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
- -

规格

- - - - - - - - - - - - - - - - -
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

浏览器兼容性

- -{{Compat("css.types.image.gradient.repeating-radial-gradient")}} - -

参阅：

- - diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html new file mode 100644 index 0000000000..13e90c5381 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html @@ -0,0 +1,182 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/gradient/repeating-radial-gradient() +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +
{{CSSRef}}
+ +

CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

+ +
/* 一个从容器中心点开始的重复渐变,
+   从红色开始，渐变到蓝色，再渐变到绿色 */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+ +

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

+ +

与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+ +
+

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

+
+ +

语法

+ +

值

+ +
+
{{cssxref("<position>")}}
+
position与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 center.
+
{{cssxref("<angle>")}}
+
渐变轴的角度。角度顺时针增加，默认值为0deg。
+
{{cssxref("<shape>")}}
+
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。
+
<extent-keyword>
+
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
+
+ + + + + + + + + + + + + + + + + + + + + + + +
KeywordDescription
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
+ +
+

提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

+
+
+
<color-stop>
+
表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
+
+ +

形式语法

+ +
repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
+        \---------------------------------------------------------------/\--------------------------------/
+                  定义轮廓、尺寸和结束形状的位置                                    色标列表
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  and <color-stop> = <color> [ <percentage> | <length> ]?
+ +

示例

+ +

径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

+ +

黑白相间的渐变

+ + +
div {
+  display: block;
+  width: 50%;
+  height: 80px;
+  border-color: #000000;
+  padding: 10px;
+}
+#grad1 {
+  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  text-shadow: 1px 1px 0pt black;
+  color: white;
+  border: 1px solid black;
+  height:5.5em;
+}
+
+ +

{{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}

+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+ +

Farthest-corner渐变

+ + +
div {
+  display: block;
+  width: 50%;
+  height: 80px;
+  border-radius: 10px;
+  border-color: #000000;
+  padding: 10px;
+}
+#grad1 {
+  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  text-shadow: 1px 1px 0pt blue;
+  color: white;
+  border: 1px solid black;
+  height:5.5em;
+}
+
+ +

{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}

+ +
background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ +{{Compat("css.types.image.gradient.repeating-radial-gradient")}} + +

参阅：

+ + diff --git a/files/zh-cn/web/css/max()/index.html b/files/zh-cn/web/css/max()/index.html deleted file mode 100644 index c5d3f3de89..0000000000 --- a/files/zh-cn/web/css/max()/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -translation_of: Web/CSS/max() ---- -
{{CSSRef}}
- -

max() 这个CSS函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . max() 可以用于以下场合 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, 或 {{CSSxRef("<integer>")}} 。

- -
/* property: max(expression [, expression]) */
-width: max(10vw, 4em, 80px);
-
- -

在上面这个例子中，宽度最小会是80px，除非视图宽度大于800px或者是一个em比20px宽。简单来说，最小宽度是80px。你也可以认为max()的值提供了一个属性最小可能的值。

- -

语法

- -

max() 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

- -

表达式可以是数学运算 (可在 {{CSSxRef("calc", "calc()")}} 了解更多信息), 直接数值, 或者是其他表达式，例如attr()，这将会计算成一个合法的参数类型（例如 {{CSSxRef("<length>")}}），也可以是嵌套的  {{CSSxRef("min", "min()")}} 和 max() 函数.

- -

你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

- -

备注

- - - -

Formal syntax

- -{{CSSSyntax}} - -

例子

- -

使图片保持一个最小的尺寸

- -

max() makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:

- -
.logo {
-  width: max(50vw, 300px);
-}
-
- -
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
- -

{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

- -

In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.

- -

为字体设定一个最小字号

- -

Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

- -

Let's look at some CSS:

- -
h1 {
-  font-size: 2rem;
-}
-h1.responsive {
-  font-size: max(4vw, 2em, 2rem);
-}
-
- -

The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

- -
<h1>This text is always legible, but doesn't change size</h1>
-<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
-
- -

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

- -

Think of the max() function as finding the minimum value allowed for a property.

- -

无障碍

- -

When max() is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a max() that has as its second value a relative length unit that is always large enough to read. For example:

- -
small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
- -

This ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
- -

浏览器兼容性

- - - -

{{Compat("css.types.max")}}

- -

也可以看看

- - diff --git a/files/zh-cn/web/css/max/index.html b/files/zh-cn/web/css/max/index.html new file mode 100644 index 0000000000..6d36661025 --- /dev/null +++ b/files/zh-cn/web/css/max/index.html @@ -0,0 +1,121 @@ +--- +title: max() +slug: Web/CSS/max +translation_of: Web/CSS/max() +original_slug: Web/CSS/max() +--- +
{{CSSRef}}
+ +

max() 这个CSS函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . max() 可以用于以下场合 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, 或 {{CSSxRef("<integer>")}} 。

+ +
/* property: max(expression [, expression]) */
+width: max(10vw, 4em, 80px);
+
+ +

在上面这个例子中，宽度最小会是80px，除非视图宽度大于800px或者是一个em比20px宽。简单来说，最小宽度是80px。你也可以认为max()的值提供了一个属性最小可能的值。

+ +

语法

+ +

max() 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

+ +

表达式可以是数学运算 (可在 {{CSSxRef("calc", "calc()")}} 了解更多信息), 直接数值, 或者是其他表达式，例如attr()，这将会计算成一个合法的参数类型（例如 {{CSSxRef("<length>")}}），也可以是嵌套的  {{CSSxRef("min", "min()")}} 和 max() 函数.

+ +

你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

+ +

备注

+ + + +

Formal syntax

+ +{{CSSSyntax}} + +

例子

+ +

使图片保持一个最小的尺寸

+ +

max() makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:

+ +
.logo {
+  width: max(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

+ +

In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.

+ +

为字体设定一个最小字号

+ +

Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

+ +

Let's look at some CSS:

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

+ +
<h1>This text is always legible, but doesn't change size</h1>
+<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

+ +

Think of the max() function as finding the minimum value allowed for a property.

+ +

无障碍

+ +

When max() is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a max() that has as its second value a relative length unit that is always large enough to read. For example:

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

This ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.max")}}

+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/min()/index.html b/files/zh-cn/web/css/min()/index.html deleted file mode 100644 index 7ce2caed4f..0000000000 --- a/files/zh-cn/web/css/min()/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -translation_of: Web/CSS/min() ---- -

{{CSSRef}}

- -

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}},{{CSSxRef("<number>")}}, 或者 {{CSSxRef("<integer>")}}。

- -
/* property: min(expression [, expression]) */
-width: min(1vw, 4em, 80px);
- -

在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

- -

语法

- -

min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 {{CSSxRef("calc", "calc()")}} 了解更多), 字面量，或者其他表达式，比如 {{CSSxRef("attr", "attr()")}}, 可以求得有效值的的类型 (比如 {{CSSxRef("<length>")}})。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

- -

注意

- - - -

Formal syntax

- -{{CSSSyntax}} - -

Examples

- -

Growing images to a maximum size

- -

min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

- -
.logo {
-  width: min(50vw, 300px);
-}
-
- -
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
- -

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "60")}}

- -

在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

- -

给 label 和 input 设置最大值

- -

CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

- -

看下面的样式：

- -
input, label {
-  padding: 2px;
-  box-sizing: border-box;
-  display: inline-block;
-  width: min(40%, 400px);
-  background-color: pink;
-}
-
-form {
-  margin: 4px;
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

- -
<form>
-  <label>Type something:</label>
-  <input type="text">
-</form>
-
- -

{{EmbedLiveSample("Setting_a_maximum_size_for_an_label_and_input", "100%", "80")}}

- -

Think of the min() function as finding the maximum value allowed for a property.

- -

无障碍问题

- -

当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 {{CSSxRef("max", "max()")}} 中， relative length unit 这样就可以便于阅读，比如：

- -
small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
- -

这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

- - - -

说明

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("css.types.min")}}

- -

See also

- - diff --git a/files/zh-cn/web/css/min/index.html b/files/zh-cn/web/css/min/index.html new file mode 100644 index 0000000000..446746e09b --- /dev/null +++ b/files/zh-cn/web/css/min/index.html @@ -0,0 +1,131 @@ +--- +title: min() +slug: Web/CSS/min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +--- +

{{CSSRef}}

+ +

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}},{{CSSxRef("<number>")}}, 或者 {{CSSxRef("<integer>")}}。

+ +
/* property: min(expression [, expression]) */
+width: min(1vw, 4em, 80px);
+ +

在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

+ +

语法

+ +

min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 {{CSSxRef("calc", "calc()")}} 了解更多), 字面量，或者其他表达式，比如 {{CSSxRef("attr", "attr()")}}, 可以求得有效值的的类型 (比如 {{CSSxRef("<length>")}})。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

+ +

注意

+ + + +

Formal syntax

+ +{{CSSSyntax}} + +

Examples

+ +

Growing images to a maximum size

+ +

min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

+ +
.logo {
+  width: min(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "60")}}

+ +

在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

+ +

给 label 和 input 设置最大值

+ +

CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

+ +

看下面的样式：

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

+ +
<form>
+  <label>Type something:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_an_label_and_input", "100%", "80")}}

+ +

Think of the min() function as finding the maximum value allowed for a property.

+ +

无障碍问题

+ +

当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 {{CSSxRef("max", "max()")}} 中， relative length unit 这样就可以便于阅读，比如：

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

+ + + +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.types.min")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html deleted file mode 100644 index 4509e35f5d..0000000000 --- a/files/zh-cn/web/css/minmax()/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS函数 - - CSS网格 - - Web - - 参考 - - 实验 - - 布局 -translation_of: Web/CSS/minmax() ---- -

CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

- -
/* <inflexible-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(100px, max-content)
-minmax(min-content, 400px)
-minmax(max-content, auto)
-minmax(auto, 300px)
-minmax(min-content, auto)
-
-/* <fixed-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* <inflexible-breadth>, <fixed-breadth> values */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
- -

语法

- -

此函数包含两个参数，最小值 和 最大值.

- -

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

- -

如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

- -

取值

- -
-
{{cssxref("<length>")}}
-
非负长度。
-
{{cssxref("<percentage>")}}
-
相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
-
{{cssxref("<flex>")}}
-
单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
-
max-content
-
表示网格的轨道长度自适应内容最大的那个单元格。
-
min-content
-
表示网格的轨道长度自适应内容最小的那个单元格。
-
auto
-
作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
-
- -

正式语法

- -{{csssyntax}} - -

示例

-
-

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

HTML

- -
<div id="container">
-  <div>
-    Item as wide as the content,<br/>
-    but at most 300 pixels.
-  </div>
-  <div>
-    Item with flexible width but a minimum of 200 pixels.
-  </div>
-  <div>
-    Inflexible item of 150 pixels width.
-  </div>
-</div>
-
-

Result

- -

{{EmbedLiveSample("example", "100%", 200)}}

- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
- -

浏览器兼容性

- -

{{Compat("css.properties.grid-template-columns.minmax")}}

- -

参考

- - - - diff --git a/files/zh-cn/web/css/minmax/index.html b/files/zh-cn/web/css/minmax/index.html new file mode 100644 index 0000000000..221c997184 --- /dev/null +++ b/files/zh-cn/web/css/minmax/index.html @@ -0,0 +1,199 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS函数 + - CSS网格 + - Web + - 参考 + - 实验 + - 布局 +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

+ +
/* <inflexible-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

语法

+ +

此函数包含两个参数，最小值 和 最大值.

+ +

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

+ +

如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
非负长度。
+
{{cssxref("<percentage>")}}
+
相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
+
{{cssxref("<flex>")}}
+
单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
+
max-content
+
表示网格的轨道长度自适应内容最大的那个单元格。
+
min-content
+
表示网格的轨道长度自适应内容最小的那个单元格。
+
auto
+
作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
+
+ +

正式语法

+ +{{csssyntax}} + +

示例

+
+

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
+
+

Result

+ +

{{EmbedLiveSample("example", "100%", 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
+ +

浏览器兼容性

+ +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

参考

+ + + + diff --git a/files/zh-cn/web/css/repeat()/index.html b/files/zh-cn/web/css/repeat()/index.html deleted file mode 100644 index e47a350e45..0000000000 --- a/files/zh-cn/web/css/repeat()/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS Grid - - Layout - - Repeat -translation_of: Web/CSS/repeat() ---- -
{{cssref}}
- -

CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

- -

该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.

- -
/* <track-repeat> values */
-repeat(4, 1fr)
-repeat(4, [col-start] 250px [col-end])
-repeat(4, [col-start] 60% [col-end])
-repeat(4, [col-start] 1fr [col-end])
-repeat(4, [col-start] min-content [col-end])
-repeat(4, [col-start] max-content [col-end])
-repeat(4, [col-start] auto [col-end])
-repeat(4, [col-start] minmax(100px, 1fr) [col-end])
-repeat(4, [col-start] fit-content(200px) [col-end])
-repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
-repeat(4, [col-start] min-content [col-middle] max-content [col-end])
-
-/* <auto-repeat> values */
-repeat(auto-fill, 250px)
-repeat(auto-fit, 250px)
-repeat(auto-fill, [col-start] 250px [col-end])
-repeat(auto-fit, [col-start] 250px [col-end])
-repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
-repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
-
-/* <fixed-repeat> values */
-repeat(4, 250px)
-repeat(4, [col-start] 250px [col-end])
-repeat(4, [col-start] 60% [col-end])
-repeat(4, [col-start] minmax(100px, 1fr) [col-end])
-repeat(4, [col-start] fit-content(200px) [col-end])
-repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
-
- -

语法

- -

取值

- -
-
{{cssxref("<length>")}}
-
正整数长度。
-
{{cssxref("<percentage>")}}
-
相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <percentage> 必须被视为 auto. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。
-
{{cssxref("<flex>")}}
-
带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
-
max-content
-
代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
-
min-content
-
代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
-
auto
-
作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。
-
auto-fill
-
如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( grid-template-rows 或 grid-template-columns用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 1 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。
-
auto-fit
-
-

行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

- -

折叠的轨道被视为具有单个固定轨道大小函数为 0px，两侧的槽都折叠了。

- -

为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 1px），以避免被零除。

-
-
- -

例子

- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: repeat(2, 50px 1fr) 100px;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

HTML

- -
<div id="container">
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    Inflexible item of 100 pixels width.
-  </div>
-</div>
- -

结果

- -

{{EmbedLiveSample("Example", "100%", 200)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/zh-cn/web/css/repeat/index.html b/files/zh-cn/web/css/repeat/index.html new file mode 100644 index 0000000000..30248d6736 --- /dev/null +++ b/files/zh-cn/web/css/repeat/index.html @@ -0,0 +1,144 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS Grid + - Layout + - Repeat +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +
{{cssref}}
+ +

CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

+ +

该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

语法

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
正整数长度。
+
{{cssxref("<percentage>")}}
+
相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <percentage> 必须被视为 auto. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。
+
{{cssxref("<flex>")}}
+
带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
+
max-content
+
代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
+
min-content
+
代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
+
auto
+
作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。
+
auto-fill
+
如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( grid-template-rows 或 grid-template-columns用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 1 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。
+
auto-fit
+
+

行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

+ +

折叠的轨道被视为具有单个固定轨道大小函数为 0px，两侧的槽都折叠了。

+ +

为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 1px），以避免被零除。

+
+
+ +

例子

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    Inflexible item of 100 pixels width.
+  </div>
+</div>
+ +

结果

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/zh-cn/web/css/transform-function/matrix()/index.html b/files/zh-cn/web/css/transform-function/matrix()/index.html deleted file mode 100644 index 85c5d7bc8e..0000000000 --- a/files/zh-cn/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() ---- -

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

- -

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

- -
注意: 直到 Firefox 16, Gecko 才接受对于 tx 和 ty 的 {{cssxref("<length>")}} 值.
- -

语法

- -
matrix(a, b, c, d, tx, ty)
-
- -

参数值

- -
-
a b c d
-
描述线性变换的 {{cssxref("<number>")}} 。
-
tx ty
-
描述如何应用这个变换的 {{cssxref("<number>")}} 。
-
- - - - - - - - - - - - - - - - - - - - - -
ℝ2 下的笛卡尔坐标ℝℙ2  下齐次坐标ℝ3下的笛卡尔坐标ℝℙ3下的齐次坐标
ac bd -


- a  c  tx
- b  d  ty
- 0  0  1

- 		a  c  tx
- b  d  ty
- 0  0  1 		ac0txbd0ty00100001
[a b c d tx ty]
- -

这些值表示以下函数:

- -

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="changed">Changed</div>
-
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
-
-
- -

结果

- -

请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

diff --git a/files/zh-cn/web/css/transform-function/matrix/index.html b/files/zh-cn/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..7f5f8f8e62 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix/index.html @@ -0,0 +1,85 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

+ +

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

+ +
注意: 直到 Firefox 16, Gecko 才接受对于 tx 和 ty 的 {{cssxref("<length>")}} 值.
+ +

语法

+ +
matrix(a, b, c, d, tx, ty)
+
+ +

参数值

+ +
+
a b c d
+
描述线性变换的 {{cssxref("<number>")}} 。
+
tx ty
+
描述如何应用这个变换的 {{cssxref("<number>")}} 。
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2 下的笛卡尔坐标ℝℙ2  下齐次坐标ℝ3下的笛卡尔坐标ℝℙ3下的齐次坐标
ac bd +


+ a  c  tx
+ b  d  ty
+ 0  0  1

+ 		a  c  tx
+ b  d  ty
+ 0  0  1 		ac0txbd0ty00100001
[a b c d tx ty]
+ +

这些值表示以下函数:

+ +

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+
+
+ +

结果

+ +

请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

diff --git a/files/zh-cn/web/css/transform-function/matrix3d()/index.html b/files/zh-cn/web/css/transform-function/matrix3d()/index.html deleted file mode 100644 index 2b25617047..0000000000 --- a/files/zh-cn/web/css/transform-function/matrix3d()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -translation_of: Web/CSS/transform-function/matrix3d() ---- -
{{CSSRef}}
- -

CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。其结果是一个 {{cssxref("<transform-function>")}} 数据类型。

- -

语法

- -

matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

- -
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
- -

Values

- -
-
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
-
Are {{cssxref("<number>")}}s describing the linear transformation.
-
a4 b4 c4 d4
-
Are {{cssxref("<number>")}}s describing the translation to apply.
-
- -
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for a4, b4 and c4.
- - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane.A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
- -

Matrix translation and scale example

- -

HTML

- -
<div class="foo">
-Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
-necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
-</div>
-
- -

CSS

- -
html {
-  width: 100%;
-}
-body {
-  height: 100vh;
-  /* Centering content */
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-content: center;
-
-}
-.foo {
-  width: 50%;
-  padding: 1em;
-  color: white;
-  background: #ff8c66;
-  border: 2px dashed black;
-  text-align: center;
-  font-family: system-ui, sans-serif;
-  font-size: 14px;
-   /* Setting up animation for better demonstration */
-  animation: MotionScale 2s alternate linear infinite;
-}
-
-@keyframes MotionScale {
-  from {
-    /*
-      Identity matrix is used as basis here.
-      The matrix below describes the
-      following transformations:
-        Translates every X point by -50px
-        Translates every Y point by -100px
-        Translates every Z point by 0
-        Scales down by 10%
-    */
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      -50,-100,0,1.1
-    );
-
-  }
-  50% {
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      0,0,0,0.9
-    );
-  }
-  to {
-     transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      50,100,0,1.1
-    )
-  }
-}
- -

Result

- -
{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
- -

Browser compatibility

- -

Please see the <transform-function> data type for compatibility info.

- -

See also

- - diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.html b/files/zh-cn/web/css/transform-function/matrix3d/index.html new file mode 100644 index 0000000000..5308863ae8 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.html @@ -0,0 +1,154 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +--- +
{{CSSRef}}
+ +

CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。其结果是一个 {{cssxref("<transform-function>")}} 数据类型。

+ +

语法

+ +

matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

+ +
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+ +

Values

+ +
+
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
+
Are {{cssxref("<number>")}}s describing the linear transformation.
+
a4 b4 c4 d4
+
Are {{cssxref("<number>")}}s describing the translation to apply.
+
+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for a4, b4 and c4.
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane.A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
+ +

Matrix translation and scale example

+ +

HTML

+ +
<div class="foo">
+Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+</div>
+
+ +

CSS

+ +
html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}
+ +

Result

+ +
{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/transform-function/perspective()/index.html b/files/zh-cn/web/css/transform-function/perspective()/index.html deleted file mode 100644 index 833023d9c3..0000000000 --- a/files/zh-cn/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -
透视函数定义了到z=0的坐标轴，使用者能够得到3D定位元素的透视，每个3D元素在Z轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素Z周小于零时会变得ge
- -

T更小，变化的幅度决定于属性值的变化大小 

- -

语法

- -
perspective(l)
-
- -

参数

- -
-
l
-
这个{{cssxref("<length>")}} 得到的是距离0坐标的距离. 被用作提供一个透视渐变属性给某个元素. 如果这个值是0或者不合法的值，将不会产生透视的变化.
-
- - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
-

这个属性变化提供了一个3D空间，并且不会变成平面类型

- 		A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001000−1/d1
- -

Examples

- -

TBD

diff --git a/files/zh-cn/web/css/transform-function/perspective/index.html b/files/zh-cn/web/css/transform-function/perspective/index.html new file mode 100644 index 0000000000..56d6762b9e --- /dev/null +++ b/files/zh-cn/web/css/transform-function/perspective/index.html @@ -0,0 +1,47 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +
透视函数定义了到z=0的坐标轴，使用者能够得到3D定位元素的透视，每个3D元素在Z轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素Z周小于零时会变得ge
+ +

T更小，变化的幅度决定于属性值的变化大小 

+ +

语法

+ +
perspective(l)
+
+ +

参数

+ +
+
l
+
这个{{cssxref("<length>")}} 得到的是距离0坐标的距离. 被用作提供一个透视渐变属性给某个元素. 如果这个值是0或者不合法的值，将不会产生透视的变化.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

这个属性变化提供了一个3D空间，并且不会变成平面类型

+ 		A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001000−1/d1
+ +

Examples

+ +

TBD

diff --git a/files/zh-cn/web/css/transform-function/rotate()/index.html b/files/zh-cn/web/css/transform-function/rotate()/index.html deleted file mode 100644 index e7e5807e55..0000000000 --- a/files/zh-cn/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS函数 - - CSS变换 -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -
CSS的rotate()函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
- - - -

元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。

- -

语法

- -

{{cssxref("<angle>")}} 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

- -
rotate(a)
-
- -

值

- -
-
a
-
是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
-
- - - - - - - - - - - - - - - - - - - - - -
-

笛卡尔坐标系 on ℝ2

- 		齐次坐标系　on ℝℙ2笛卡尔坐标系 on ℝ3齐次坐标系 on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
- -

结果

- -

{{EmbedLiveSample("示例","100%","200")}}

- -

浏览器兼容

- -

有关兼容性信息，请参阅<transform-function>数据类型。

- -

参见

- - diff --git a/files/zh-cn/web/css/transform-function/rotate/index.html b/files/zh-cn/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..c176ecc3f2 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate/index.html @@ -0,0 +1,91 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS函数 + - CSS变换 +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +
CSS的rotate()函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
+ + + +

元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。

+ +

语法

+ +

{{cssxref("<angle>")}} 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

+ +
rotate(a)
+
+ +

值

+ +
+
a
+
是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
+
+ + + + + + + + + + + + + + + + + + + + + +
+

笛卡尔坐标系 on ℝ2

+ 		齐次坐标系　on ℝℙ2笛卡尔坐标系 on ℝ3齐次坐标系 on ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("示例","100%","200")}}

+ +

浏览器兼容

+ +

有关兼容性信息，请参阅<transform-function>数据类型。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/transform-function/rotate3d()/index.html b/files/zh-cn/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index f9e046f02b..0000000000 --- a/files/zh-cn/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - 3D - - CSS - - CSS Transforms -translation_of: Web/CSS/transform-function/rotate3d() ---- -
{{CSSRef}}
- -

rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

- -
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
- - - -

在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。

- -
与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
- -

语法

- -
rotate3d(x, y, z, a)
-
- -

值

- -
-
x
-
 {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
-
y
-
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
-
z
-
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
-
a
-
 {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
-
- - - - - - - - - - - - - - - - - - - -
在ℝ2上的笛卡尔坐标这种变换应用于3D空间，不可用于平面空间
在ℝℙ2上的齐次坐标
在ℝ3上的笛卡尔坐标 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
在ℝℙ3上的齐次坐标
- -

示例

- -

绕Y轴旋转

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
- -

效果

- -

{{EmbedLiveSample("绕Y轴旋转","100%","200")}}

- -

围绕自定义轴旋转

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
- -

效果

- -

{{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

- -

浏览器兼容

- -

有关兼容性信息，请参阅<transform-function> 数据类型。

- -

参见

- - diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.html b/files/zh-cn/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..1dab01c6aa --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - 3D + - CSS + - CSS Transforms +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

+ +
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+ + + +

在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。

+ +
与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
+ +

语法

+ +
rotate3d(x, y, z, a)
+
+ +

值

+ +
+
x
+
 {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
+
y
+
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
+
z
+
{{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
+
a
+
 {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
+
+ + + + + + + + + + + + + + + + + + + +
在ℝ2上的笛卡尔坐标这种变换应用于3D空间，不可用于平面空间
在ℝℙ2上的齐次坐标
在ℝ3上的笛卡尔坐标 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
在ℝℙ3上的齐次坐标
+ +

示例

+ +

绕Y轴旋转

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+ +

效果

+ +

{{EmbedLiveSample("绕Y轴旋转","100%","200")}}

+ +

围绕自定义轴旋转

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+ +

效果

+ +

{{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

+ +

浏览器兼容

+ +

有关兼容性信息，请参阅<transform-function> 数据类型。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/transform-function/rotatex()/index.html b/files/zh-cn/web/css/transform-function/rotatex()/index.html deleted file mode 100644 index eda2306e00..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatex()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -translation_of: Web/CSS/transform-function/rotateX() ---- -
{{CSSRef}}
- -

rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标(水平轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

- -
{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
- - - -

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

- -
-

注意: rotateX(a) 相当于 rotate3d(1, 0, 0, a).

-
- -
注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
- -

语法

- -

rotateX() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

- -
rotateX(a)
-
- -

参数值

- -
-
a
-
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
-
- - - - - - - - - - - - - - - - - -
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateX(45deg);
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("示例", "auto", 180)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.html b/files/zh-cn/web/css/transform-function/rotatex/index.html new file mode 100644 index 0000000000..f534ced0bf --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatex/index.html @@ -0,0 +1,108 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +--- +
{{CSSRef}}
+ +

rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标(水平轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

+ +
{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
+ + + +

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

+ +
+

注意: rotateX(a) 相当于 rotate3d(1, 0, 0, a).

+
+ +
注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+ +

语法

+ +

rotateX() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

+ +
rotateX(a)
+
+ +

参数值

+ +
+
a
+
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
+
+ + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateX(45deg);
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例", "auto", 180)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/rotatey()/index.html b/files/zh-cn/web/css/transform-function/rotatey()/index.html deleted file mode 100644 index b051527444..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatey()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -translation_of: Web/CSS/transform-function/rotateY() ---- -
{{CSSRef}}
- -

rotateY()  函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}} 数据类型。

- -
{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
- - - -

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

- -
-

注意: rotateY(a) 相当于 rotate3d(0, 1, 0, a).

-
- -
注意: 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
- -

语法

- -

rotateY() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

- -
rotateY(a)
-
- -

参数值

- -
-
a
-
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
-
- - - - - - - - - - - - - - - - - -
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateY(60deg);
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("示例", "auto", 180)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.html b/files/zh-cn/web/css/transform-function/rotatey/index.html new file mode 100644 index 0000000000..8381afc1ca --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatey/index.html @@ -0,0 +1,108 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +--- +
{{CSSRef}}
+ +

rotateY()  函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}} 数据类型。

+ +
{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
+ + + +

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

+ +
+

注意: rotateY(a) 相当于 rotate3d(0, 1, 0, a).

+
+ +
注意: 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+ +

语法

+ +

rotateY() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

+ +
rotateY(a)
+
+ +

参数值

+ +
+
a
+
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
+
+ + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateY(60deg);
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例", "auto", 180)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/rotatez()/index.html b/files/zh-cn/web/css/transform-function/rotatez()/index.html deleted file mode 100644 index b7fc6b5da2..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatez()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -translation_of: Web/CSS/transform-function/rotateZ() ---- -
{{CSSRef}}
- -

rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

- -
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
- - - -

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

- -
-

注意: rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

-
- -
注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
- -

语法

- -

rotateZ() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

- -
rotateZ(a)
-
- -

参数值

- -
-
a
-
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
-
- - - - - - - - - - - - - - - - - -
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001
- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateZ(45deg);
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("示例", "auto", 180)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.html b/files/zh-cn/web/css/transform-function/rotatez/index.html new file mode 100644 index 0000000000..877ecada5b --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatez/index.html @@ -0,0 +1,108 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +--- +
{{CSSRef}}
+ +

rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

+ +
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
+ + + +

旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

+ +
+

注意: rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

+
+ +
注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
+ +

语法

+ +

rotateZ() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

+ +
rotateZ(a)
+
+ +

参数值

+ +
+
a
+
a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
+
+ + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateZ(45deg);
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例", "auto", 180)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/scale()/index.html b/files/zh-cn/web/css/transform-function/scale()/index.html deleted file mode 100644 index b025b5c5a0..0000000000 --- a/files/zh-cn/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

- -

- -

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

- -

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

- -
scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
- -

语法

- -
scale(sx)
- -

或

- -
scale(sx, sy)
- -

值

- -
-
sx
-
{{cssxref("<number>")}}，表示缩放向量的横坐标。
-
sy
-
{{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
-
- - - - - - - - - - - - - - - - - - - - - -
ℝ2上的笛卡尔坐标变换ℝℙ2上的齐次坐标变换ℝ3上的笛卡尔坐标变换ℝℙ3上的齐次坐标变换
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
- -

示例

- -

单一维度缩放

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  /* 等同于变换: scaleX(2) scaleY(2);*/
-  transform: scale(2);
-  background-color: blue;
-}
-
- -

结果

- -

{{EmbedLiveSample("单一维度缩放","100%","200")}}

- -

在X和Y两个维度缩放并移动缩放中心

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
-
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  /* 等同于 scaleX(2) scaleY(0.5) */
-  transform: scale(2, 0.5);
-  transform-origin: left;
-  background-color: blue;
-}
-
- -

结果

- -

{{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}

diff --git a/files/zh-cn/web/css/transform-function/scale/index.html b/files/zh-cn/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..7f43221751 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scale/index.html @@ -0,0 +1,112 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

+ +

+ +

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

+ +

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

+ +
scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
+ +

语法

+ +
scale(sx)
+ +

或

+ +
scale(sx, sy)
+ +

值

+ +
+
sx
+
{{cssxref("<number>")}}，表示缩放向量的横坐标。
+
sy
+
{{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2上的笛卡尔坐标变换ℝℙ2上的齐次坐标变换ℝ3上的笛卡尔坐标变换ℝℙ3上的齐次坐标变换
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

示例

+ +

单一维度缩放

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于变换: scaleX(2) scaleY(2);*/
+  transform: scale(2);
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("单一维度缩放","100%","200")}}

+ +

在X和Y两个维度缩放并移动缩放中心

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于 scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}

diff --git a/files/zh-cn/web/css/transform-function/scalex()/index.html b/files/zh-cn/web/css/transform-function/scalex()/index.html deleted file mode 100644 index c5a34d3e40..0000000000 --- a/files/zh-cn/web/css/transform-function/scalex()/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -tags: - - axial symmetry - - scaleX() - - scaleX(-1) -translation_of: Web/CSS/transform-function/scaleX() ---- -
{{CSSRef}}
- -

scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。 缩放不是各向同性的，并且元素的角度不保守。

- -

- -

scaleX(sx) 是 scale(sx, 1) 或 scale3d(sx, 1, 1) 的一个速记/缩写。

- -
-

Note:

- -

scaleX(-1) 定义一个 轴向对称性(axial symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。

-
- -

Syntax

- -
scaleX(s)
-
- -

Values

- -
-
s
-
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
- -

Examples

- -

Without changing the origin

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scaleX(2);
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

- -

Translating the origin of the transformation

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scaleX(2);
-  transform-origin: left;
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/zh-cn/web/css/transform-function/scalex/index.html b/files/zh-cn/web/css/transform-function/scalex/index.html new file mode 100644 index 0000000000..094baba99a --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scalex/index.html @@ -0,0 +1,110 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +tags: + - axial symmetry + - scaleX() + - scaleX(-1) +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +--- +
{{CSSRef}}
+ +

scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。 缩放不是各向同性的，并且元素的角度不保守。

+ +

+ +

scaleX(sx) 是 scale(sx, 1) 或 scale3d(sx, 1, 1) 的一个速记/缩写。

+ +
+

Note:

+ +

scaleX(-1) 定义一个 轴向对称性(axial symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。

+
+ +

Syntax

+ +
scaleX(s)
+
+ +

Values

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
+ +

Examples

+ +

Without changing the origin

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scaleX(2);
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

+ +

Translating the origin of the transformation

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scaleX(2);
+  transform-origin: left;
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/zh-cn/web/css/transform-function/scaley()/index.html b/files/zh-cn/web/css/transform-function/scaley()/index.html deleted file mode 100644 index 4c690dcbbe..0000000000 --- a/files/zh-cn/web/css/transform-function/scaley()/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - 'transform: rotateX(180deg);' - - 'transform: scaleY(-1);' -translation_of: Web/CSS/transform-function/scaleY() ---- -
{{CSSRef}}
- -

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a {{cssxref("<transform-function>")}} data type.

- -

- -

It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the {{cssxref("transform-origin")}} property).

- -
-

Note: scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

- -

transform: rotateX(180deg);  === transform: scaleY(-1);

-
- -

Syntax

- -
scaleY(s)
-
- -

Values

- -
-
s
-
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
- -

Examples

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleY(0.6);
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples", 200, 200)}}

- -

Browser compatibility

- -

Please see the <transform-function> data type for compatibility info.

- -

See also

- - diff --git a/files/zh-cn/web/css/transform-function/scaley/index.html b/files/zh-cn/web/css/transform-function/scaley/index.html new file mode 100644 index 0000000000..42298ee377 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scaley/index.html @@ -0,0 +1,92 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +tags: + - 'transform: rotateX(180deg);' + - 'transform: scaleY(-1);' +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +--- +
{{CSSRef}}
+ +

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a {{cssxref("<transform-function>")}} data type.

+ +

+ +

It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the {{cssxref("transform-origin")}} property).

+ +
+

Note: scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

+ +

transform: rotateX(180deg);  === transform: scaleY(-1);

+
+ +

Syntax

+ +
scaleY(s)
+
+ +

Values

+ +
+
s
+
Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
10 0s 1000s0001 1000s0001 10000s0000100001
[1 0 0 s 0 0]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleY(0.6);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples", 200, 200)}}

+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/transform-function/skew()/index.html b/files/zh-cn/web/css/transform-function/skew()/index.html deleted file mode 100644 index 6d5f1f4bf5..0000000000 --- a/files/zh-cn/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS变形 - - CSS方法 - - 引用 -translation_of: Web/CSS/transform-function/skew() ---- -
{{CSSRef}}
- -
skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型
- -
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
- - - -

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

- -

语法

- -

 skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

- -
skew(ax)
-
-skew(ax, ay)
-
- -

参数值

- -
-
ax
-
ax 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
-
ay
-
ay 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
-
- - - - - - - - - - - - - - - - - - - - - -
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
- -

示例

- -

使用单个参数

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg); /* Equal to skewX(10deg) */
-  background-color: pink;
-}
- -

结果

- -

{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

- -

使用两个参数

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg, 10deg);
-  background-color: pink;
-}
- -

结果

- -

{{EmbedLiveSample("Using_two_angles", 200, 200)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/skew/index.html b/files/zh-cn/web/css/transform-function/skew/index.html new file mode 100644 index 0000000000..4373d3c9bd --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skew/index.html @@ -0,0 +1,140 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS变形 + - CSS方法 + - 引用 +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +
{{CSSRef}}
+ +
skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型
+ +
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
+ + + +

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

+ +

语法

+ +

 skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

+ +
skew(ax)
+
+skew(ax, ay)
+
+ +

参数值

+ +
+
ax
+
ax 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
+
ay
+
ay 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
+
+ + + + + + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
+ +

示例

+ +

使用单个参数

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

+ +

使用两个参数

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Using_two_angles", 200, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/skewx()/index.html b/files/zh-cn/web/css/transform-function/skewx()/index.html deleted file mode 100644 index 8069ddb912..0000000000 --- a/files/zh-cn/web/css/transform-function/skewx()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -translation_of: Web/CSS/transform-function/skewX() ---- -
{{CSSRef}}
- -

skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

- -
{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
- - - -

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

- -
-

注意: skewX(a) 相当于 skew(a)。

-
- -

语法

- -
skewX(a)
-
- -

参数值

- -
-
a
-
a 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
-
- - - - - - - - - - - - - - - - - - - - - -
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]
- -

示例

- -

HTML

- -
<div>Normal</div>
-<div class="skewed">Skewed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skewX(10deg); /* Equal to skew(10deg) */
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("示例", 200, 200)}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/skewx/index.html b/files/zh-cn/web/css/transform-function/skewx/index.html new file mode 100644 index 0000000000..f89fcb9a5c --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skewx/index.html @@ -0,0 +1,108 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +--- +
{{CSSRef}}
+ +

skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

+ +
{{EmbedInteractiveExample("pages/css/function-skewX.html")}}
+ + + +

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

+ +
+

注意: skewX(a) 相当于 skew(a)。

+
+ +

语法

+ +
skewX(a)
+
+ +

参数值

+ +
+
a
+
a 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
+
+ + + + + + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 1 0 0]
+ +

示例

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewX(10deg); /* Equal to skew(10deg) */
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例", 200, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/skewy()/index.html b/files/zh-cn/web/css/transform-function/skewy()/index.html deleted file mode 100644 index 7362f1ce01..0000000000 --- a/files/zh-cn/web/css/transform-function/skewy()/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -translation_of: Web/CSS/transform-function/skewY() ---- -
-

{{CSSRef}}

- -

skewY() 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

- -

{{EmbedInteractiveExample("pages/css/function-skewY.html")}}

- -

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

-
- -

语法

- -
skewY(a)
-
- -

参数值

- -
-
a
-
- -
-
a 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。
-
- - - - - - - - - - - - - - - - - - - - - -
实坐标系 ℝ2齐次坐标系ℝℙ2实坐标系 ℝ3齐次坐标系ℝℙ3
-

1           0

- -

tan(ax)  1

- 		-

1                0     0

- -

tan(ax)      1     0

- -

0                 0    1 

- 		-

1             0        0

- -

tan(ax)   1        0

- -

0              0       1

- 		-

1            0  0  0

- -

tan(ax) 1   0  0

- -

0            0  1  0

- -

0            0  0  1

-
[1 tan(a) 0 1 0 0]
- -

示例

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: skewY(40deg);
-  background-color: blue;
-}
-
- -

结果

- -

{{EmbedLiveSample("示例","100%","250")}}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

浏览器兼容

- -

有关兼容性信息，请参阅 <transform-function> 的数据类型。

- -

另请参阅

- - diff --git a/files/zh-cn/web/css/transform-function/translate()/index.html b/files/zh-cn/web/css/transform-function/translate()/index.html deleted file mode 100644 index a9d5e07535..0000000000 --- a/files/zh-cn/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Reference -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。

- -

- -

该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。

- -

语法

- -
/* Single <length-percentage> values */
-transform: translate(200px);
-transform: translate(50%);
-
-/* Double <length-percentage> values */
-transform: translate(100px, 200px);
-transform: translate(100px, 50%);
-transform: translate(30%, 200px);
-transform: translate(30%, 50%);
-
- -

值

- -
-
单个 <length-percentage> 作为参数
-
该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标  (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 0. 例如, translate(2) 等价于 translate(2, 0) 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。
-
参数是两个 <length-percentage> 构成
-
此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标  (x-coordinate)  和纵坐标  (y-coordinate)  向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
-

平移不是 ℝ2 中的线性变换，因此不能使用矩阵来表示。

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

形式语法

- -
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
-
- -

例子

- -

使用单个轴平移

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

- -

y轴和x轴都平移

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
- -

结果

- -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

- -

规格

- - - - - - - - - - - - - - - - -
技术规格状态注解
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Initial definition
- -

浏览器兼容性

- -

请参阅 <transform-function> 数据类型以获取兼容性信息。

- -

See also

- - diff --git a/files/zh-cn/web/css/transform-function/translate/index.html b/files/zh-cn/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..8a17defad7 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS Function + - CSS Transforms + - Reference +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。

+ +

+ +

该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。

+ +

语法

+ +
/* Single <length-percentage> values */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Double <length-percentage> values */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
+ +

值

+ +
+
单个 <length-percentage> 作为参数
+
该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标  (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 0. 例如, translate(2) 等价于 translate(2, 0) 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。
+
参数是两个 <length-percentage> 构成
+
此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标  (x-coordinate)  和纵坐标  (y-coordinate)  向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

平移不是 ℝ2 中的线性变换，因此不能使用矩阵来表示。

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

形式语法

+ +
translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
+
+ +

例子

+ +

使用单个轴平移

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+ +

y轴和x轴都平移

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

+ +

规格

+ + + + + + + + + + + + + + + + +
技术规格状态注解
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

浏览器兼容性

+ +

请参阅 <transform-function> 数据类型以获取兼容性信息。

+ +

See also

+ + diff --git a/files/zh-cn/web/css/transform-function/translate3d()/index.html b/files/zh-cn/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index ca01d9c4ea..0000000000 --- a/files/zh-cn/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS 函数 - - CSS 变换 - - 参考 -translation_of: Web/CSS/transform-function/translate3d() ---- -
{{CSSRef}}
- -

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

- -

语法

- -
translate3d(tx, ty, tz)
- -
-
-

常量

-
-
tx
-
是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。
-
ty
-
是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。
-
tz
-
是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。
-
- - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
-

 此变换适用于3D空间，并不适用于这两种情况。

- 		-

平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。

- 		100tx010ty001tz0001
- -

示例

- -

单轴变化示例

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
-<p>foo</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) translate3d(10px,0px,0px);
-  /* equivalent to perspective(500px) translateX(10px)*/
-  background-color: blue;
-}
- -

结果

- -

{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}

- -

z轴与x轴变化

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
-<p>foo</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) translate3d(10px,0px,100px);
-  background-color: blue;
-}
- -

结果

- -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

- -

 

- -

规格

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
- -

浏览器兼容性

- -

有关兼容性信息，请参阅<transform-function>的兼容性信息。

- -

另请参阅

- - - -

 

diff --git a/files/zh-cn/web/css/transform-function/translate3d/index.html b/files/zh-cn/web/css/transform-function/translate3d/index.html new file mode 100644 index 0000000000..dfc10c3467 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate3d/index.html @@ -0,0 +1,139 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS 函数 + - CSS 变换 + - 参考 +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

+ +

语法

+ +
translate3d(tx, ty, tz)
+ +
+
+

常量

+
+
tx
+
是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。
+
ty
+
是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。
+
tz
+
是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
+

 此变换适用于3D空间，并不适用于这两种情况。

+ 		+

平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。

+ 		100tx010ty001tz0001
+ +

示例

+ +

单轴变化示例

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+<p>foo</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) translate3d(10px,0px,0px);
+  /* equivalent to perspective(500px) translateX(10px)*/
+  background-color: blue;
+}
+ +

结果

+ +

{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}

+ +

z轴与x轴变化

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+<p>foo</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) translate3d(10px,0px,100px);
+  background-color: blue;
+}
+ +

结果

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

+ +

 

+ +

规格

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
+ +

浏览器兼容性

+ +

有关兼容性信息，请参阅<transform-function>的兼容性信息。

+ +

另请参阅

+ + + +

 

diff --git a/files/zh-cn/web/css/transform-function/translatex()/index.html b/files/zh-cn/web/css/transform-function/translatex()/index.html deleted file mode 100644 index c800a6c7eb..0000000000 --- a/files/zh-cn/web/css/transform-function/translatex()/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -translation_of: Web/CSS/transform-function/translateX() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -browser-compat: css.types.transform-function.translateX ---- -
{{CSSRef}}
- -

translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

- -

- -
-

注意： translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

-
- -

语法

- -
translateX(t)
-
- -

参数

- -
-
t
-
     代表了向量平移的横坐标长度{{cssxref("<length>")}}。
-
- - - - - - - - - - - - - - - - - - - - - -
ℝ2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
-

在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。

- 		-

1 0 t

- -

0 1 0

- -

0 0 1

- 		-

1 0 t

- -

0 1 0

- -

0 0 1

- 		-

1 0 0 t

- -

0 1 0 0

- -

0 0 1 0

- -

0 0 0 1

-
[1 0 0 1 t 0]
- -

示例

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateX(10px); /* 等同于 translate(10px) */
-  background-color: pink;
-}
- -

结果

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

标准化说明

- - - - - - - - - - - - - - - - -
标准状态备注
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
- -

浏览器兼容性

- -

请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

- -

参阅

- - diff --git a/files/zh-cn/web/css/transform-function/translatex/index.html b/files/zh-cn/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..17d6a1f5c8 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatex/index.html @@ -0,0 +1,133 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateX() +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +
{{CSSRef}}
+ +

translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

+ +

+ +
+

注意： translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

+
+ +

语法

+ +
translateX(t)
+
+ +

参数

+ +
+
t
+
     代表了向量平移的横坐标长度{{cssxref("<length>")}}。
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
+

在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。

+ 		+

1 0 t

+ +

0 1 0

+ +

0 0 1

+ 		+

1 0 t

+ +

0 1 0

+ +

0 0 1

+ 		+

1 0 0 t

+ +

0 1 0 0

+ +

0 0 1 0

+ +

0 0 0 1

+
[1 0 0 1 t 0]
+ +

示例

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* 等同于 translate(10px) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

标准化说明

+ + + + + + + + + + + + + + + + +
标准状态备注
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
+ +

浏览器兼容性

+ +

请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

+ +

参阅

+ + diff --git a/files/zh-cn/web/css/transform-function/translatey()/index.html b/files/zh-cn/web/css/transform-function/translatey()/index.html deleted file mode 100644 index cbce9c8b14..0000000000 --- a/files/zh-cn/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

translateY() 在页面垂直移动元素，结果是 CSS 数据类型 {{cssxref("<transform-function>")}}。

- -

- -
-

注意: translateY(ty) 对应 translate(0, ty) 或translate3d(0, ty, 0)。

-
- -

语法

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
- -

值

- -
-
{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 {{cssxref("transform-box")}} 定义。
-
- - - - - - - - - - - - - - - - - - - - - -
笛卡尔坐标 ℝ2 -

在ℝℙ2上的同类坐标

- 		-

在ℝ3上的笛卡尔坐标

- 		-

在ℝℙ3同类坐标

-
-

在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

语法

- -
translateY({{cssxref("<length-percentage>")}})
- -

示例

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
- -

结果

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

规范

- - - - - - - - - - - - - - - - -
规范状态注释
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

浏览器兼容性

- -

请查看 <transform-function>。

- -

了解更多

- - diff --git a/files/zh-cn/web/css/transform-function/translatey/index.html b/files/zh-cn/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..644a30d0cc --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatey/index.html @@ -0,0 +1,116 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

translateY() 在页面垂直移动元素，结果是 CSS 数据类型 {{cssxref("<transform-function>")}}。

+ +

+ +
+

注意: translateY(ty) 对应 translate(0, ty) 或translate3d(0, ty, 0)。

+
+ +

语法

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+ +

值

+ +
+
{{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 {{cssxref("transform-box")}} 定义。
+
+ + + + + + + + + + + + + + + + + + + + + +
笛卡尔坐标 ℝ2 +

在ℝℙ2上的同类坐标

+ 		+

在ℝ3上的笛卡尔坐标

+ 		+

在ℝℙ3同类坐标

+
+

在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

语法

+ +
translateY({{cssxref("<length-percentage>")}})
+ +

示例

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

浏览器兼容性

+ +

请查看 <transform-function>。

+ +

了解更多

+ + diff --git a/files/zh-cn/web/css/url()/index.html b/files/zh-cn/web/css/url()/index.html deleted file mode 100644 index 85f9f27cc5..0000000000 --- a/files/zh-cn/web/css/url()/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: -slug: Web/CSS/url() -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -

{{ CssRef() }}

- -

概述

- -

CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。

- -
URI 和 URL?
-
-URI（统一资源标识符） 与 URL（统一资源定位符） 不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。
-
-在 CSS Level 1 中，url() 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 <url>）
-
-在 CSS Level 2 中，url() 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致  url() 函数被用于创建一个  <uri> 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。
-
-为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， url() 函数被明确定义为指代 <url> CSS 数据类型，且 <uri> CSS 数据类型不再存在。
-
-注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。
- -

许多 CSS 属性 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。

- -

url() 函数

- -

URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

- -

语法

- -
 <CSS 属性>:  url("http://mysite.example.com/mycursor.png")
-
- <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
-
- -
-

注意: 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 {{Bug(752230)}}。

-
- -

示例

- -
.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
-
- -
ul { list-style: square url(http://www.example.com/redball.png) }
-
- -

规范

- - - - - - - - - - - - - - - - - - - - - - - - - - -
规范状态说明
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}自 CSS Level 2 (Revision 1) 以来没有显著更改
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}自 CSS Level 1 以来没有显著更改
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }} 
- -

浏览器兼容性

- -{{Compat("css.types.url")}} diff --git a/files/zh-cn/web/css/url/index.html b/files/zh-cn/web/css/url/index.html new file mode 100644 index 0000000000..49b4abde6d --- /dev/null +++ b/files/zh-cn/web/css/url/index.html @@ -0,0 +1,82 @@ +--- +title: +slug: Web/CSS/url +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +

{{ CssRef() }}

+ +

概述

+ +

CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。

+ +
URI 和 URL?
+
+URI（统一资源标识符） 与 URL（统一资源定位符） 不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。
+
+在 CSS Level 1 中，url() 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 <url>）
+
+在 CSS Level 2 中，url() 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致  url() 函数被用于创建一个  <uri> 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。
+
+为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， url() 函数被明确定义为指代 <url> CSS 数据类型，且 <uri> CSS 数据类型不再存在。
+
+注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。
+ +

许多 CSS 属性 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。

+ +

url() 函数

+ +

URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

+ +

语法

+ +
 <CSS 属性>:  url("http://mysite.example.com/mycursor.png")
+
+ <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
+
+ +
+

注意: 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 {{Bug(752230)}}。

+
+ +

示例

+ +
.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
+
+ +
ul { list-style: square url(http://www.example.com/redball.png) }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}自 CSS Level 2 (Revision 1) 以来没有显著更改
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}自 CSS Level 1 以来没有显著更改
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }} 
+ +

浏览器兼容性

+ +{{Compat("css.types.url")}} diff --git a/files/zh-cn/web/css/var()/index.html b/files/zh-cn/web/css/var()/index.html deleted file mode 100644 index f4121fa9b5..0000000000 --- a/files/zh-cn/web/css/var()/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS 变量 - - CSS 方法 - - var() - - 参考 - - 实验性的 -translation_of: Web/CSS/var() ---- -
{{CSSRef}}
- -

概述

- -

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

- -

语法

- -

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

- -{{csssyntax}} - -
-

注意：自定义属性的回退值允许使用逗号。例如， var(--foo, red, blue) 将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

-
- -

值

- -
-
<custom-property-name> 自定义属性名
-
在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
-
<declaration-value> 声明值（后备值）
-
回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，例如var(--bg-color, --bs;color)是不合法的，而var(--bg-color, --value(bs;color))是合法的）。
-
- -

示例

- -

在 :root 上定义，然后使用它

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -

当第一个值未定义，回退值生效

- -
/* 后备值 */
-
-/* 在父元素样式中定义一个值 */
-.component {
-  --text-color: #080; /* header-color 并没有被设定 */
-}
-
-/* 在 component 的样式中使用它： */
-.component .text {
-  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
-}
-.component .header {
-  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
-}
-
-
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
- -

浏览器兼容性

- -

{{Compat("css.properties.custom-property.var")}}

- -

另请参见

- -
    -
  • {{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.
    • -
  • Using CSS variables
    • -
diff --git a/files/zh-cn/web/css/var/index.html b/files/zh-cn/web/css/var/index.html new file mode 100644 index 0000000000..c79b5482d9 --- /dev/null +++ b/files/zh-cn/web/css/var/index.html @@ -0,0 +1,99 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS 变量 + - CSS 方法 + - var() + - 参考 + - 实验性的 +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
{{CSSRef}}
+ +

概述

+ +

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

+ +

语法

+ +

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

+ +{{csssyntax}} + +
+

注意：自定义属性的回退值允许使用逗号。例如， var(--foo, red, blue) 将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

+
+ +

值

+ +
+
<custom-property-name> 自定义属性名
+
在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
+
<declaration-value> 声明值（后备值）
+
回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，例如var(--bg-color, --bs;color)是不合法的，而var(--bg-color, --value(bs;color))是合法的）。
+
+ +

示例

+ +

在 :root 上定义，然后使用它

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +

当第一个值未定义，回退值生效

+ +
/* 后备值 */
+
+/* 在父元素样式中定义一个值 */
+.component {
+  --text-color: #080; /* header-color 并没有被设定 */
+}
+
+/* 在 component 的样式中使用它： */
+.component .text {
+  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
+}
+.component .header {
+  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
+}
+
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.properties.custom-property.var")}}

+ +

另请参见

+ +
    +
  • {{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.
    • +
  • Using CSS variables
    • +
-- cgit v1.2.3-54-g00ecf