-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组边框色,那么最后一组边框色将自动渲染剩余的宽度
--------------------------------------------------------------
-webkit/IE/Firefox的一些样式的更多相关文章
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- css3中webkit内核的滚动栏样式
项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...
- 去除HTML选择——兼容IE、FireFox(document.onselectstart,样式)
引之:http://taoistwar.iteye.com/blog/278963 今天做一个拖动效果,在网上找了个模板,作发后发现一拖动就会选择其它页面部分,需要去除这个效果, 找了个模板看了下发现 ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- webkit浏览器下改变滚动条样式
/*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...
- input的width和padding-left同时存在时IE兼容问题
总的来说,text-indent不影响元素的最终宽度但是有兼容性问题,padding-left在中国主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS ...
- input输入框和 pure框架中的 box-sizing 值问题
在使用pureCSS框架的时候,遇到一个问题. input输入框,我给他们设置了宽度和padding值,我发现,在火狐和谷歌上面发现,增加padding值并不会影响最终的宽度,而在IE6 7下则会影响 ...
- overflow滚动条样式设置,ie和webkit内核
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浏览器默认样式(user agent stylesheet)+cssreset
每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整 ...
随机推荐
- 2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none
对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- 在win10 docker启动的centos容器中安装nginx
我是在win10机器上搭建了一个docker,在docker启动了centos容器,在centos中安装nginx. 安装配置docker 直接在官网下载docker for windows:http ...
- JDK安装以及配置环境变量的步骤
---恢复内容开始--- 一.JDK安装 JDK下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...
- jquery中注意点
1.jquery.fn.extend和jquery.extend jquery.fn.extend是向jquery中的prototype中添加方法或者属性,而jquery.extend是向jquery ...
- 关于追踪qemu 源码函数路径的一个方法
这阵子一直在研究qemu 磁盘io路径的源码,发现直接看代码是意见非常低效率的事情,qemu是一个比较庞大的家伙(源码部分大概154MB,完全由C语言来完成),整个结构也都非常地复杂,所以从代码上研究 ...
- 通过minicom传送文件的相关配置及使用方法
写一下我使用串口向开发板传送文件中遇到的问题及解决办法: 使用的软硬件环境: 虚拟机:VMware® Workstation 8.0.1 Linux操作系统:Fedora 9 开发板:mini6410 ...
- 关于ArcGis for javascript的引用天地图
1. 在引用天地图时, 我们要自定义一个相关的比例尺转换类 const tileInfoObj = { rows: 256, cols: 256, compressionQuality: 0, ori ...
- jetbrains软件使用
1.注册(有条件的话建议使用官方渠道注册https://www.jetbrains.com/store) 2018 license server http://idea.congm.in 2.禁用双击 ...
- ubuntu mysql5.6二进制安装
200 ? "200px" : this.width)!important;} --> 介绍 以前一直使用centos今天需要对一台ubantu的系统安装mysql,虽然它也 ...
- bzoj 2811: [Apio2012]Guard【线段树+贪心】
关于没有忍者的区间用线段树判就好啦 然后把剩下的区间改一改:l/r数组表示最左/最右没被删的点,然后删掉修改后的左边大于右边的:l升r降排个序,把包含完整区间的区间删掉: 然后设f/g数组表示i前/后 ...