首页 > 代码库 > css3新特性总结

css3新特性总结

1.-webkit-tap-highlight-color (用于移动设备) 

设置或检索对象的轻按时高亮。
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮,将值设置为全透明即可,比如transparent
对应的脚本特性为textHighlightColor。

技术分享

  相关: 

    1) user-drag:auto | element | none

     取值:

       auto:使用默认的拖拽行为,这种情况只有图片和链接可以被拖拽。

       element:整个元素而非它的内容可拖拽。

       none:元素不能被拖动。在通过选中后可拖拽。

      技术分享

    2) user-select:none | text | all | element  文本的可选择性

none:文本不能被选择

text:可以选择文本

all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element:可以选择文本,但选择范围受元素边界的约束

2.touch-action 触控效果

  参考: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

  取值:

    技术分享 

   1.auto                        默认值,允许浏览器给元素添加touch行为
   2.none                       不允许默认的touch行为
   3.pan-x                      允许水平轴触摸驱动的平移
   4.pan-y                      允许垂直轴触摸驱动的平移
   5.pinch-zoom             允许拖拽缩放 
   6.manipulation           允许触摸驱动的平移和拖拽缩放
   7.double-tap-zoom     允许整个页面双击缩放指定元素
   8.inherit                      继承父元素的值

 

3. text-stroke:<‘ text-stroke-width ‘> || <‘ text-stroke-color ‘>

   text-stroke-width 描边文字

 text-stroke-color 描边颜色

 text-fill-color 文字填充颜色技术分享

 

 4.-webkit-text-size-adjust:auto | none | <percentage> (仅ios支持)

取值: 

auto:文本大小根据设备尺寸进行调整。

none:文本大小不会根据设备尺寸进行调整。

<percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

     如果你的页面没有定义meta viewport,此属性定义将无效;

 

  

css3新特性总结