注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 装修市场

CSS WHITELIST

更新时间:2015/09/18 访问次数:89343

CSS白名单

基本样式

属性 取值
background-attachment fixed
background-clip padding-box | content-box | no-clip
background-color color
background-image url
background-origin padding | content
background-position center | right | top | center | bottom | length | percentage
background-repeat repeat-x | repeat-y | no-repeat
border border-style | border-color
border-bottom border-bottom-style | border-bottom-color
border-bottom-color transparent
border-bottom-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-width medium | thick | length
border-color transparent
border-left border-left-style | border-left-color
border-left-color transparent
border-left-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-width medium | thick | length
border-right border-right-style | border-right-color
border-right-color transparent
border-right-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-width medium | thick | length
border-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top border-top-width border-top-style border-top-color
border-top-color transparent
border-top-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-width medium | thick | length
border-width border-right-width | border-bottom-width | border-left-width
box-sizing border-box
outline outline-style | outline-width
outline-color invert
outline-offset length
outline-style hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width medium | thick | length
color black | blue | fuchsia | gray | green | lime | maroon | navy | olive | orange | purple | red | silver | teal | white | yellow

Transparent

hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000,只有3位和6位);

rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0),0到255)

direction rtl
letter-spacing length
line-height length | number | percentage
text-align right | center | justify
text-decoration underline | overline | line-through | blink
text-indent percentage
text-overflow ellipsis
text-shadow length | length | opacity
text-transform capitalize | uppercase | lowercase
unicode-bidi embed | bidi-override
white-space pre | nowrap | pre-wrap | pre-line
word-spacing length
word-break break-all | keep-all
word-wrap break-word
writing-mode tb-rl
font font-style font-variant font-weight font-size/line-height font-family
font-family Arial,Arial Black,Arial Narrow,Arial Unicode MS,Basemic Symbol,Basemic Times,BasemicNew,Batang,BatangChe,Book Antiqua,Bookman Old Style, Bookshelf Symbol 7, Calibri, Cambria, Cambria Math, Candara, Century, Century Gothic, Comic Sans MS, Consolas, Constantia, Corbel, Courier New, Dialog, DialogInput, Dotum, DotumChe, Estrangelo Edessa, Franklin Gothic Medium, Garamond, Gautami, Georgia, Gulim, GulimChe, Gungsuh, GungsuhChe, Impact, Kartika, Kingsoft Phonetic Plain, Latha, Lucida Bright, Lucida Console, Lucida Sans, Lucida Sans Typewriter, Lucida Sans Unicode,Mangal, Marlett, Microsoft Sans Serif, Microsoft Yahei, MingLiU, Monospaced, Monotype Corsiva, MS Gothic, MS Mincho, MS Outlook, MS PGothic, MS PMincho, MS Reference Sans Serif, MS Reference Specialty, MS UI Gothic, MT Extra, MV Boli, Palatino Linotype, PMingLiU, Raavi,SansSerif, Segoe UI, Serif, Shruti, sshlinedraw, Sylfaen, Symbol, Tahoma, Times New Roman, Trebuchet MS, Tunga, Verdana, Vrinda, Webdings, Wingdings, Wingdings 2, Wingdings 3, 仿宋_GB2312, 华文中宋, 华文仿宋, 华文宋体, 华文彩云, 华文新魏, 华文楷体, 华文琥珀, 华文细黑, 华文行楷, 华文隶书, 宋体, 宋体-PUA, 幼圆, 微软雅黑, 新宋体, 方正姚体, 方正舒体, 楷体_GB2312, 隶书, 黑体
font-size x-small | small | medium | large | x-large | xx-large | smaller | larger | length | percentage
font-size-adjust number
font-stretch wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-style italic | oblique
font-variant small-caps
font-weight wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
margin length | percentage
margin-bottom length | percentage
margin-left length | percentage
margin-right length | percentage
margin-top length | percentage
padding percentage
padding-bottom percentage
padding-left percentage
padding-right percentage
padding-top percentage
list-style <ListStyle>
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha
list-style-position outside
list-style-image url
marker-offset length
content 仅支持空串和\20
counter-increment 仅支持空串和\20
counter-reset l仅支持空串和\20
height length | percentage
max-height length | percentage
max-width length | percentage
min-height percentage
min-width percentage
width length | percentage
bottom length | percentage
clear right | both | none
clip rect (top, right, bottom, left)
cursor auto | crosshair | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress
display block | inline | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
float right | none
left length | percentage
opacity length
overflow hidden | scroll | auto
overflow-x hidden | scroll | auto
overflow-y hidden | scroll | auto
position fixed | relative | static
right length | percentage
top length | percentage
vertical-align sub | super | top | text-top | middle | bottom | text-bottom | length | percentage
visibility hidden | collapse
z-index int { , 99} 小于99
orphans Int
page-break-after always | avoid | left | right
page-break-before always | avoid | left | right
page-break-inside avoid
widows int
border-collapse collapse
border-spacing length length
caption-side bottom
empty-cells show
resize both | horizontal | vertical
table-layout fixed
zoom number | percentage
opacity number

 

CSS3扩展样式

属性 取值
border-radius [[ <length> | <percentage> ]{1,4} [ /
border-top-radius [[ <length> | <percentage> ] [ <length> | <percentage> ]?

 

 

border-right-radius [[ <length> | <percentage> ] [ <length> | <percentage> ]?

 

 

border-bottom-radius [[ <length> | <percentage> ] [ <length> | <percentage> ]?

 

 

border-left-radius [[ <length> | <percentage> ] [ <length> | <percentage> ]?

 

border-top-left-radius [[ <length> | <percentage> ]
border-top-right-radius 同border-top-left-radius
border-bottom-right-radius 同border-top-left-radius
border-bottom-left-radius 同border-top-left-radius
transition 同transition
transition-property 同transition-property
transition-duration 同transition-duration
transition-timing-function 同transition-timing-function
transition-delay 同transition-delay
box-shadow <shadow> [,<shadow>]*

where <shadow> is defined as:

inset? && [ <length> <length> <length>? <length>? <color>? ]

 

@keyframes w3c
text-shadow w3c
Transform transform transform-origin
Animation: animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

 

-scrollbar-arrow-color color
-scrollbar-shadow-color color
-scrollbar-face-color color
-scrollbar-3dlight-color color
-scrollbar-darkshadow-color color
scrollbar-highlight-color color
-scrollbar-base-color color
-scrollbar-track-color color
-scrollbar-3d-light-color color

 

 

浏览器指定属性前缀

  • webkit内核
     -webkit-
  • mozilla系列浏览器,firefox
     -moz-
  • opera
     -o-
  • ie10
     -ms-
  • 通用
     不加前缀

例子:

    -webkit-transform: scale(2,0.5);
    -moz-transform: scale(2,0.5);
     -ms-transform: scale(2,0.5);
      -o-transform: scale(2,0.5);
         transform: scale(2,0.5);

 

推荐css3手册

http://www.w3.org/Style/CSS/

https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference

http://css.doyoe.com/css3-quicksearch.htm

一些css3例子

http://veryless.org/overview.html

css3配合js最佳实践

FAQ

关于此文档暂时还没有FAQ
返回
顶部