仅限于-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组边框色,那么最后一组边框色将自动渲染剩余的宽度
--------------------------------------------------------------

-webkit/IE/Firefox的一些样式的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. css3中webkit内核的滚动栏样式

    项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...

  3. 去除HTML选择——兼容IE、FireFox(document.onselectstart,样式)

    引之:http://taoistwar.iteye.com/blog/278963 今天做一个拖动效果,在网上找了个模板,作发后发现一拖动就会选择其它页面部分,需要去除这个效果, 找了个模板看了下发现 ...

  4. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  5. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  6. input的width和padding-left同时存在时IE兼容问题

    总的来说,text-indent不影响元素的最终宽度但是有兼容性问题,padding-left在中国主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS ...

  7. input输入框和 pure框架中的 box-sizing 值问题

    在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...

  8. overflow滚动条样式设置,ie和webkit内核

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 浏览器默认样式(user agent stylesheet)+cssreset

    每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...

随机推荐

  1. ps -ef | grep

    ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/jdk1.5. ...

  2. ibatis和mybatis的区别

    区别1:全局配置文件(sqlMapConfig.xml)的差异 主要是元素标签命名的差异,比如mybatis的根元素标签为<configuration>,ibatis的 根元素标签为< ...

  3. Win7下安装iMac系统

    首先是灰常激动啊,一下午的努力最终在自己华硕的笔记本上安装了mac系统. 先上一个成果截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXl4aGh4/ ...

  4. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX【转】

    本文转载自:http://www.cnblogs.com/52php/p/5681751.html 四.更好一点的Hello World 没有最好,只有更好 从本小节开始,后面所有的构建我们都将采用  ...

  5. Oracle “CONNECT BY” 用法

    Oracle “CONNECT BY”是层次查询子句,一般用于树状或者层次结果集的查询.其语法是: [ START WITH condition ] CONNECT BY [ NOCYCLE ] co ...

  6. 动画库tween.js

    动画库tween.js var Tween = { Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter; ...

  7. POJ3233:Matrix Power Series(矩阵快速幂+递推式)

    传送门 题意 给出n,m,k,求 \[\sum_{i=1}^kA^i\] A是矩阵 分析 我们首先会想到等比公式,然后得到这样一个式子: \[\frac{A^{k+1}-E}{A-E}\] 发现要用矩 ...

  8. bzoj 1497 [NOI2006]最大获利【最大权闭合子图+最小割】

    不要被5s时限和50000点数吓倒!大胆网络流!我一个5w级别的dinic只跑了1s+! 看起来没有最大权闭合子图的特征--限制,实际上还是有的. 我们需要把中转站看成负权点,把p看成点权,把客户看成 ...

  9. ROS学习笔记五:创建和使用ROS msg和srv

    1 msg和srv简介 1.1 msg文件 msg文件就是一个简单的text文件,其中每行有一个类型和名称,可用的类型如下: int8, int16, int32, int64 (plus uint* ...

  10. Zoj 1610 Count the Colors (线段树+区间更新+暴力计数)

    题目大意: 有n次操作,每次都是对一根线中的一段区间进行染色(颜色并不相同),有时候后面的颜色有可能覆盖前面的颜色,问最后涂完色,能看到的颜色有几种,每种颜色有几部分? 解题思路: 这个题目建树的时候 ...