`
zccst
  • 浏览: 3315646 次
  • 性别: 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);}
分享到:
评论

相关推荐

    css3弹性布局-webkit-box的用法演示

    在CSS3中,弹性布局(Flexbox)是一种强大的布局模式,允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中,WebKit浏览器(如Safari和Chrome)引入了一个实验性的前缀 `-webkit-box...

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

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

    css解决Webkit 核心文本输入框的高亮

    虽然Webkit内核浏览器具有一定的共通性,但其他非Webkit内核的浏览器(如Firefox和IE)可能对某些CSS属性的支持情况不同。因此,在实际应用中,建议进行广泛的测试以确保效果的一致性。 ### 总结 通过以上介绍,...

    WebKit CSS3 动画基础

    **WebKit CSS3 动画基础** WebKit 是一个开源的网页渲染引擎,被广泛应用于苹果的 Safari 和谷歌的 Chrome 浏览器中。CSS3 动画是 Web 开发中的一个重要组成部分,它允许开发者通过时间序列控制元素的视觉变化,...

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

    ### Webkit内核浏览器默认CSS属性详解 #### 引言 在前端开发中,了解不同浏览器内核的默认样式设置对于实现跨浏览器兼容性至关重要。WebKit作为一款流行的浏览器引擎,被广泛应用于Safari、Google Chrome等浏览器...

    css3-webkit-transform+JS模拟播放进度

    1. CSS3 `-webkit-transform` 属性: `-webkit-transform` 是一个非标准的CSS属性,但在Webkit内核的浏览器(如Chrome和Safari)中广泛支持。它允许对元素进行2D和3D转换,如旋转、缩放、平移和倾斜。在这个场景中...

    ie6实现css3属性

    这些HTC文件通常通过定义自定义的CSS属性(如-moz-border-radius或-webkit-border-radius)并在HTC文件中解析和应用这些属性,来实现IE6的圆角效果。 然而,需要注意的是,使用HTC文件会带来一些性能问题,因为它们...

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

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

    纯css3 animation属性制作旋转文字动画切换效果

    虽然大部分现代浏览器都支持CSS3的`animation`和`transform`属性,但在某些老版本的浏览器中可能需要添加前缀(如 `-webkit-`)来确保兼容性。同时,为了给不支持这些特性的浏览器提供备选方案,可以使用`fallback`...

    css3 transform属性创意Loading加载动画效果

    "css3 transform属性创意Loading加载动画效果"正是这样一个利用前沿技术实现的优秀案例。 CSS3中的`transform`属性是一个强大的工具,它可以对元素进行二维或三维的变换操作,如旋转(rotate)、缩放(scale)、平...

    css3地图坐标点闪烁发光特效.zip

    6. **兼容性**:虽然现代浏览器对CSS3支持良好,但为确保老版本浏览器也能正常显示,需要检查并应用适当的浏览器前缀,如 `-webkit-`,`-moz-`,`-ms-` 和 `-o-`。 在实际应用中,这个特效可能被用于各种项目,如...

    css3 transform属性利用伪元素制作字母卡片开关门

    【CSS3 Transform属性详解】 CSS3的transform属性是现代网页设计中的一个重要工具,它允许我们对元素进行二维或三维的变换操作,如旋转、缩放、平移和倾斜等,从而创造出丰富的动态视觉效果。在本示例中,"css3 ...

    纯CSS3 gradient属性制作36种漂亮的html网页渐变按钮样式.zip

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多强大的新特性,其中之一就是gradient属性。这个属性允许我们创建出丰富多彩、动态感十足的渐变效果,极大地提升了网页界面的视觉吸引力。本资源"纯CSS3 ...

    css3圆角兼容火狐、IE和webkit

    本文将详细探讨如何实现CSS3圆角在火狐(Firefox)、Internet Explorer(IE)以及基于WebKit内核的浏览器(如Chrome和Safari)中的兼容性。 1. **火狐浏览器(Firefox)兼容性** 火狐从Firefox 3.6版本开始支持CSS...

    谷歌和safari webkit独有css hack

    1. `-webkit-` 前缀:WebKit浏览器支持许多实验性的CSS属性,它们在正式标准化之前会有特定的浏览器前缀,如`-webkit-border-radius`用于圆角,`-webkit-box-shadow`用于阴影,`-webkit-linear-gradient`用于线性...

    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 和 ...

    HTML5+CSS3实例 :3D立方体旋转

    在本实例中,CSS3的transform属性被用于实现3D立方体的旋转效果,通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有: 1. `perspective`:定义观察者与3D...

Global site tag (gtag.js) - Google Analytics