`
zccst
  • 浏览: 3291767 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css3 webkit属性

阅读更多
作者:zccst

见了很多web-kit打头的css属性,但是由于这些属性比较新,不知道是什么意思,特此收集记录。

很多-web-kit打头的css,还有-moz-, -o, -ms-等,但是也不是所有的都已经成为标准,所以有些情况只能写webkit。



2015-05-06

-webkit-margin-collapse
-webkit-margin-after-collapse:separate; #相邻的元素合并后分离
-webkit-margin-before-collapse:discard; #相邻的元素合并前丢弃

-webkit-user-select:none  不允许用户选择。


-webkit-text-size-adjust
1、当样式表里font-size < 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效(使字体大小不受设备终端的调整)
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的
例子:
body{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust: none;text-size-adjust: none;
}

-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
例子:
body{-webkit-tap-highlight-color: rgba(0,0,0,0);}
分享到:
评论

相关推荐

    CSS -webkit-box-orient: vertical属性编译后丢失问题详解

    这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法: /*! autoprefixe

    Webkit内核的浏览器默认CSS属性

    这个总结了Webkit内核的浏览器的默认CSS属性,也就是解释HTML标签时候的默认样式,比如&lt;p&gt;&lt;br /&gt;这种的默认样式……

    css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)

    为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:   display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒...

    CSS3 动画属性(Animation)属性

    css3 Animation属性参数介绍例如@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 ...

    使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

    不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果 基础先来看一下blur属性的表达式: CSS Code复制内容到剪贴板 filter:blur(add=add,direction,strength=...

    大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:

    大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:

    基于css3的属性transition制作菜单导航效果

    本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下: CSS3导航菜单,当你运动层在显示层下面时,transition会使页面产生闪动,原因是Chrome在初始渲染CSS动画时产生的Bug,...

    HTML5&CSS3网页制作:transitionduration属性.pptx

    解决方法:css3中的transition-duration属性,用于规定完成过渡效果需要花费的时间(以秒或毫秒计)。 语法格式: transition-duration: time 定义和用法 兼容性:Internet Explorer 10、Firefox、Opera 和 Chrome ...

    CSS文本超出2行就隐藏并且显示省略号

    css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) -webkit-line-clamp:2; /...

    react-css:将纯CSS转换为(可选自动前缀)React样式的属性映射

    将纯CSS转换为(可选自动前缀)React样式的属性映射。 用法 /** @jsx React.DOM */ var React = require ( "react" ) ; var fromCSS = require ( "react-css" ) . fromCSS ; /* Pre-compute the CSS to avoid ...

    CSS3按钮发光动画 绚丽多彩

    该CSS3按钮发光动画主要是利用了webkit的动画属性,让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛,但是在一些需要特效的网页中用来做提交表单按钮或者菜单项,那就非常方便了。

    HTML5&CSS3网页制作:transition属性.pptx

    Safari 支持替代的 -webkit-transition 属性。Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 请始终设置 transition-duration属性,否则时长为 0,就不会产生过渡效果。 使用transition属性...

    使用 css3 transform 属性来变换背景图的方法

    使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 这个听...

    CSS3属性 line-clamp控制文本行数的使用

    为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子...

    CSS3图片模糊效果

    今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的filter属性即可,针对不同浏览器用-webkit-filter、-moz...

    JavaScript判断浏览器对CSS3属性是否支持的多种方法

    下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: 第一种:javascript比较常用下面这个代码: var support_css3 = (function() { var div = document.createElement('div'), vendors = 'Ms O Moz ...

    CSS 透明度属性

    Firefox3.5已不支持私有属性-moz-opacity了,在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的,Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性,Firefox升级到3.5之后,一些网站原来有的...

    CSS教程:CSS3圆角属性

    随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。 对于一些浏览器,...

Global site tag (gtag.js) - Google Analytics