-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中也有一些预留样式,可以让我们的排版更美观整 ...
随机推荐
- css的白富美
1,CSS(Cascading Style Sheet)是用来装饰HTML的,当浏览器读到这样一个样式的时候,它就会按照这个文档进行格式化(渲染) 2,CSS的组成:选择器和声明,声明又包括属性和属性 ...
- P1439 排列LCS问题
P1439 排列LCS问题 56通过 220提交 题目提供者yeszy 标签二分动态规划 难度普及+/提高 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 给出1-n的两个排列P1和P2 ...
- Tomcat最多支持并发多少用户?
当一个进程有 500 个线程在跑的话,那性能已经是很低很低了.Tomcat 默认配置的最大请求数是 150,也就是说同时支持 150 个并发,当然了,也可以将其改大.当某个应用拥有 250 个以上并发 ...
- Django缓存系统选择之Memcached与Redis的区别与性能对比
Django支持使用Memcached和Redis这两种流行的内存型数据库作为缓存系统.我们今天来看Memcached和Redis的区别和性能对比. redis和memcached的区别 1.Redi ...
- python名片管理系统V2
主程序: #! /usr/bin env python3 # -*- coding: utf-8 -*- # 项目三: # 1.要求:编写一个名片管理系统,功能如下: # 用户输入相对应的指令,实现对 ...
- [转]如何用git将项目代码上传到github
注册账户以及创建仓库 要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称后Create,之 ...
- html title属性
<table class="table table-hover table-striped"> @foreach (var article in Model) { &l ...
- linux下解压tgz文件(转载)
转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压: tar zxvf myfile.tgz
- Ruby Numeric类
Numeric类 Numeric ---------> Integer ---------> Fixnum ...
- bzoj 3714: [PA2014]Kuglarz【最小生成树】
参考:https://blog.csdn.net/aarongzk/article/details/48883741 没想到吧.jpg 来自题解: "如果用sum[i]表示前i个杯子底球的总 ...