css中不常用的代码
1.all 属性用于重置所有属性，除了 unicode-bidi 和 direction
div {
background-color: yellow;
color: red;
all: initial;
}
语法：all: initial|inherit|unset;
| 值 | 说明 |
|---|---|
| initial | 修改所有元素属性或父元素的值为其初始化值 |
| inherit | 修改所有元素属性或父元素的值为其父元素的值 |
| unset | 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值 |
2.使元素看上去像标准的用户界面元素：appearance
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
语法：appearance: normal|icon|window|button|menu|field;
| 值 | 说明 |
|---|---|
| icon | 作为一个小图片的呈现元素 |
| normal | 正常呈现元素 |
| window | 作为一个视口呈现元素 |
| button | 作为一个按钮，呈现元素 |
| menu | 作为一个用户选项设定呈现元素选择 |
| field | 作为一个输入字段呈现元素 |
3.backface-visibility 属性定义当元素背面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。
语法：backface-visibility: visible|hidden;
| 值 | 说明 |
|---|---|
| visible | 背面是可见的。 |
| hidden | 背面是不可见的。 |
4.background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法：backface-attachment: scroll|fixed|local|initial|inherit;
| 值 | 说明 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。 |
| inherit | 指定 background-attachment 的设置应该从父元素继承。 |
5.background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。
语法：background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
| 值 | 说明 |
|---|---|
| normal | 默认值。设置正常的混合模式。 |
| multiply | 正片叠底模式。 |
| screen | 滤色模式。 |
| overlay | 叠加模式。 |
| darken | 变暗模式。 |
| lighten | 变亮模式。 |
| color-dodge | 颜色减淡模式。 |
| saturation | 饱和度模式 |
| color | 颜色模式 |
| luminosity | 亮度模式 |
6.border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
语法：border-collapse: collapse|separate|inherit
| 值 | 说明 |
|---|---|
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值 |
7.filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
语法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
| 值 | 说明 |
|---|---|
| none | 默认值，没有效果 |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值 |
| brightness(%) | 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 |
| contrast(%) | 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下： (必须)这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果). (可选)这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). (可选)这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 (可选)查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 |
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0 |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| initial | 设置属性为默认值 |
| inherit | 从父元素继承该属性， |
8.content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
语法：content:none|normal|counter|attr(attribute)|string|open-quote |close-quote|no-open-quote|no-close-quote|url(url) |inherit
| 值 | 说明 |
|---|---|
| none | 设置Content，如果指定成Nothing |
| normal | 设置content，如果指定的话，正常，默认是"none"（该是nothing） |
| counter | 设定计数器内容 |
| attr(attribute) | 设置Content作为选择器的属性之一。 |
| string | 设置Content到你指定的文本 |
| open-quote | 设置Content是开口引号 |
| close-quote | 设置Content是闭合引号 |
| no-open-quote | 如果指定，移除内容的开始引号 |
| no-close-quote | 如果指定，移除内容的闭合引号 |
| url(url) | 设置某种媒体（图像，声音，视频等内容） |
| inherit | 指定的content属性的值，应该从父元素继承 |
9.empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。
语法：empty-cells:hide|show|inherit
| 值 | 说明 |
|---|---|
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
10.list-style-position属性指示如何相对于对象的内容绘制列表项标记。
语法：list-style-position:inside|outside|inherit
| 值 | 说明 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
11.list-style-type 属性设置列表项标记的类型。
语法：list-style-type:none|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
| 值 | 说明 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号） |
12.object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
语法：object-fit: fill|contain|cover|scale-down|none|initial|inherit;
| 值 | 说明 |
|---|---|
| fill | 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain | 保持原有尺寸比例。内容被缩放。 |
| cover | 保持原有尺寸比例。但部分内容可能被剪切。 |
| none | 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 |
| scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| initial | 设置为默认值 |
| inherit | 从该元素的父元素继承属性 |
13.多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
注意：perspective 属性只影响 3D 转换元素。
语法：perspective: number|none;
| 值 | 说明 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视 |
14.unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
语法：unicode-bidi: normal|embed|bidi-override|initial|inherit;
| 值 | 说明 |
|---|---|
| normal | 默认。不使用附加的嵌入层面。 |
| embed | 创建一个附加的嵌入层面。 |
| bidi-override | 创建一个附加的嵌入层面。重新排序取决于 direction 属性。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |