-webkit/IE/Firefox的一些样式

仅限于-webkit的样式特效；
-webkit-overflow-scrolling:touch;滚动时回弹效果；
如果出现偶尔卡住不动的情况，那么在使用该属性的元素上不设置定位或者手动设置定位为static；
如果添加动态内容页面不能滚动，让子元素height+1；
方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar
main-inner {
min-height: calc(100% + 1px)
}

main:after {
min-height: calc(100% + 1px)
}

如果需要在body使用这样设置效果:
html,body{
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
------------------------------------------------------------------------
-webkit-user-drag：auto | element | none;
auto:使用默认的拖拽行为，这种情况只有图片和链接可以被拖拽。
element:整个元素（不仅仅只是它的内容）可拖拽。
none:元素不能被拖动。在通过选中后可拖拽。
--------------------------------------------------------------
-webkit-tap-highlight-color：<color>
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色;
如果想取消这个高亮，将值设置为全透明即可，比如 transparent
--------------------------------------------------------------
-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
<direction> = above | below | left | right
<offset> = <length> | <percentage>
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
none：
无倒影
<direction>　Demo: 简单图片倒影 See with Webkit
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边
<offset>　Demo: 图片与倒影间隔 See with Webkit
<length>：
用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：
用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image>　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
none：无遮罩图像
<url>：使用绝对或相对地址指定遮罩图像。
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。
--------------------------------------------------------------
-webkit-text-stroke-color：<color>
文字的描边颜色。
-webkit-text-stroke-width：<length>
用长度值指定描边厚度(如2px之类的),不允许负值;
--------------------------------------------------------------
-webkit-text-fill-color：<color>
默认值：transparent;
--------------------------------------------------------------

仅限于IE的样式特效；
scrollbar-3dlight-color：<color>
检索或设置对象滚动条3d亮色阴影边框(threedlightshadow)的外观颜色。
scrollbar-darkshadow-color：<color>（除table系外的所有块级元素）
检索或设置对象滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色。
scrollbar-highlight-color：<color>
检索或设置对象滚动条3d高亮边框(threedhighlight)的外观颜色。
scrollbar-shadow-color：<color>
检索或设置对象滚动条3d阴影边框(threedshadow)的外观颜色。
以上默认值都是:threedshadow;适用于：除table系外的所有块级元素
--------------------------------------------------------------
scrollbar-arrow-color：<color>
检索或设置对象滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。
默认值：buttontext;适用于：除table系外的所有块级元素
--------------------------------------------------------------
scrollbar-face-color：<color>
检索或设置对象滚动条3D表面的(threedface)的外观颜色。
默认值：threedface;适用于：除table系外的所有块级元素
--------------------------------------------------------------
scrollbar-track-color：<color>
检索或设置对象滚动条拖动区域的外观颜色。
默认值：transparent;适用于：除table系外的所有块级元素
--------------------------------------------------------------
scrollbar-base-color：<color>
检索或设置对象滚动条基准颜色。其它界面颜色将据此自动调整。
默认值：transparent;适用于：除table系外的所有块级元素
--------------------------------------------------------------
filter：<filter>+ 适用于：所有元素;
两种效果相同
div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */
--------------------------------------------------------------
behavior：<url> | url(#objID) | url(#default#behaviorName)
适用于：所有元素
<url>：
使用绝对或相对地址指定DHTML行为组件（.htc）
url(#objID)：
用二进制实现DHTML行为，#objID为object对象指定的id特性
url(#default#behaviorName)：
IE的默认行为。由behaviorName指定（设置或检索对象的DHTML行为。多个行为之间用空格隔开。）
如下示例：
div{behavior:url(fly.htc) url(shy.htc);}
--------------------------------------------------------------
Firefox下面的
border-colors：（一般有四个方向的值）
border-top-colors
border-right-colors
border-bottom-colors
border-left-colors
border的width为(n)px，那么最多可以设置n组边框色，
每组边框色宽度为1px；如果border的width为10px，
却只设置了6组边框色，那么最后一组边框色将自动渲染剩余的宽度
--------------------------------------------------------------

转载于:https://www.cnblogs.com/lhl66/p/8598189.html