CSS3 不为人知的属性-webkit-tap-highlight-color的理解

（一）-webkit-tap-highlight-color

        这个属性只用于iOS (iPhone和iPad)。当你点击一个连接或者经过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你能够设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0便可。

示例：设置高亮色为50%透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

（二）css3中-webkit-text-size-adjust详解：      

一、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时能够用 html{-webkit-text-size-adjust:none;}

二、-webkit-text-size-adjust放在body上会致使页面缩放失效

三、body会继承定义在html的样式

四、用-webkit-text-size-adjust不要定义成可继承的或全局的

(三)outline：none(1)在pc端为a标签订义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及如下浏览器还不识别此属性，须要在a标签上添加hidefocus="true"(2)input，textarea{outline:none}  取消chrome下默认的文本框聚焦样式(3)在移动端是不起做用的，想要去除文本框的默认样式可使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，实际上是多余。

（四）webkit-appearance   -webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。   注意：不一样type的input使用这个属性以后表现不一。text、button无样式，radio、checkbox直接消失

（五）.-webkit-user-select   -webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，通常加在body上规定整个body的文字都不会自动调整

（六）-webkit-touch-callout   -webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

 

 

 

 

CSS3那些鲜为人知的高级属性

 http://www.cnblogs.com/cosiray/archive/2012/12/06/2804770.html

尽管现代浏览器已经支持了众多的CSS3属性，可是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试而且最经常使用到，因此若是你最近在设计网站，你很难能脱离它们。

可是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，可是它们并无获得太多的关注。或许它们中的一些应该这样(被无视)，可是其它的属性应该获得更多的承认。最伟大的财富隐藏在Webkit的下面，并且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，咱们将看一下不为人知的CSS 2.1和CSS3属性以及它们在现代浏览器中的支持状况。

 

说明: 对于每一个属性，咱们这里规定：”WebKit” 即指代使用Webkit内核的浏览器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代采用Gecko内核的浏览器(Firefox等)。而后有的属性是官方CSS 2.1. 规范的一部分，这意味着更多的浏览器甚至一些古老的浏览器也会支持它们。最后，一个CSS3 的标签标明遵照这个标准，被最新的浏览器版本——好比Firefox 四、Chrome 十、Safari 五、Opera 11.10以及IE9支持的属性。

WebKit特有属性

-webkit-mask

这个属性是至关强大的，因此详细的介绍超出了本文的范畴，它很是值得深刻研究，由于它能够在实际应用中为你省掉不少时间。

-webkit-mask让为一个元素添加蒙板成为可能，从而你能够建立任意形状的花样。蒙板能够是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会彻底显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的连接。

 

示例

图片蒙板:

1 2 3 4

.element{ background: url(img/image.jpg) repeat; -webkit-mask: url(img/mask.png); }

示例

渐变蒙板:

1 2 3 4

.element2 { background: url(img/image.jpg) repeat; -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); }

扩展阅读: Safari Developer Library

-webkit-text-stroke

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke能够为文字添加边框。它不但能够设置文字边框的宽度，也能设置其颜色。并且，配合使用color: transparent属性，你还能够建立镂空的字体！

示例

为全部的<h1>标题设定一个2px宽的蓝色边框:

1	h1 {-webkit-text-stroke: 2px blue}

另外一个特性是，经过设定1px的透明边框，可让文字变得平滑:

1	h2 {-webkit-text-stroke: 1px transparent}

建立红色镂空字体：

1 2 3 4

h3 { color: transparent; -webkit-text-stroke: 4px red; }

 

扩展阅读: Safari Developer Library

-webkit-nbsp-mode

换行有时是很棘手的事情：有时你但愿文字在适当的地方断行(而不是折行)，有时你又不想这样。一个能控制这个的属性就是-webkit-nbsp-mode，它让你能够改变&nbsp;空白符的行为，强制文字在它被用到的地方断行。经过设置值为space便可实现。

扩展阅读: Safari Developer Library

-webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当你点击一个连接或者经过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你能够设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0便可。

示例

设置高亮色为50%透明的红色:

1	-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

扩展阅读: Safari Developer Library

zoom: reset

一般来讲，zoom是一个IE专用的属性。可是webkit也开始支持它了，并且使用值reset，webkit能够实现不错的效果(有趣的是，IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——若是某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。

注：其实，咱们经常使用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是能够实现相似的效果，不一样的是，设置该属性的元素内的文字不会被放大/缩小，可是页面上的其它元素则会变化——神飞

扩展阅读: Safari Developer Library

-webkit-margin-collapse

这个属性属于限制级的，可是它仍是很是值得关注。一般，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一块儿。

最多见的例子就是两个相邻的<p>元素会共享他们的margin值。想要控制这个表现，咱们可使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则中止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加。

 

扩展阅读: Safari Developer Library

-webkit-box-reflect

你还记得几乎每一个网站都把他们的网站logo或者头部的文字作成倒影的那个年代吗？谢天谢地，那个年代已通过去了，可是若是你要在一些按钮、导航、或者其余UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一块儿使用。同时，蒙板图片也是一样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

 

示例

这个倒影会出如今它的父元素的下面并有5px的间距:

1	-webkit-box-reflect: below 5px;

这个倒影会投射到元素的右边，没有间距。而后，一个蒙板将会被应用(url(mask.png)):

1	-webkit-box-reflect: right 0 url(mask.png);

扩展阅读: Safari Developer Library

-webkit-marquee

另外一个属性让咱们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在如今变的颇有用，好比咱们在比较小的手机屏幕上切换内容，若是不断行的话文字将不能彻底显示。

ozPDA建立的这个天气的应用很好的使用了它。 (若是你木有看到变换的文字，能够尝试换一个城市来体验。须要使用WebKit内核浏览器)

示例

1 2 3 4 5 6 7 8

.marquee { white-space: nowrap; overflow:-webkit-marquee; width: 70px; -webkit-marquee-direction: forwards; -webkit-marquee-speed: slow; -webkit-marquee-style: alternate; }

要让marquee工做须要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

注：虽然HTML的marquee标签在XHTML中被抛弃了，可是各浏览器仍是支持的，可是有一个问题就是，marquee标签可能会占用比较大的cpu，大猫对其进行了深刻的研究，结论是marquee的速度不能太快，而webkit用-webkit-marquee属性是最好的——神飞。

扩展阅读: Safari Developer Library

Gecko特有属性

font-size-adjust

这个有用的CSS3属性目前只有Firefox支持。咱们能够用它来设定指定元素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)。好比，Verdana比同型号的Times字体更清晰，它有着更矮的x-height。为了弥补这个缺陷，咱们能够用font-size-adjust属性来纠正后者。

该属性在拥有不一样的x-height的字体上很是有用。即使你在当心的使用小号字体，在问题出现时font-size-adjust也能提供解决方案。

示例

若是因为某种缘由用户的电脑上没有安装Verdana，那么Arial就会被修正，从而和Verdana有相同的长宽比(0.58)。

1 2 3 4 5

p { font-family:Verdana, Arial, sans-serif; font-size: 12px; font-size-adjust: 0.58; }

 

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

image-rendering

n年前，图片并不会被按照其原始大小显示，而是被设计师给缩放掉。取决于缩放的大小和上下文，图片可能会在浏览器中展示的不太好或者干脆就是错掉了的。如今，浏览器有了更好的算法来显示缩放的图片，不过，在你的图片被缩放后彻底的控制其表现也是件很赞的事情。

若是你的图片有比较锐的线条并但愿他们在缩放后保持它，这个Gecko私有属性就显得特别有用。相关的值是-moz-crisp-edges。一样的算法也用在optimizeSpeed，而auto 和optimizeQuality 定义为标准行为(用可行的最佳质量来缩放元素)。 image-rendering 属性一样能够用于<video> 和<canvas>元素，和用于背景图片同样。这是个CSS3 标准属性，可是目前只有Firefox支持。

 

值得注意的是，-ms-interpolation-mode: bicubic，尽管它是个IE专有属性。然而，它让Internet Explorer 7 在缩放图片后将其渲染为比较高的质量。因为这个浏览器默认处理的很烂，因此这个属性可能会颇有用。

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

-moz-border-top-colors

这个属性能够归类为’养眼’。它让你能够在border宽度大于1px的时候为其设置不一样的边框颜色。固然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。

不爽的是，没有一个简写的-moz-border-colors 缩写，因此每一个边框都要分开设置。同时，border-width要和给到的颜色的数量保持一致，不然，最后的那个颜色值会填充到剩下的宽度。

示例

这个例子中，元素的左右两边边框会是标准的橙色，上下则有种相似渐变的颜色——红黄蓝三色。

1 2 3 4 5

div { border: 3px solid orange; -moz-border-top-colors: red yellow blue; -moz-border-bottom-colors: red yellow blue; }

 

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

混合属性

-webkit-user-select 和 -moz-user-select

或许你经常不但愿用户在你的网站上选择文本，不管是不是出于版权的缘由。一般你们会有js来实现，另外一个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。

请谨慎使用这个属性：由于大部分用户是来查看信息的，他们能够复制并存储下来以备未来之用，因此这种方法既无用也无效。若是你禁用了复制粘贴功能，用户仍是能够经过查看源文件来获取到他们想要的内容。搞不懂这个属性为何会被webkit和gecko支持。

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network

-webkit-appearance 和 -moz-appearance

你曾经想过将一张图片假装成单选按钮么？或者，一个输入框看起来像一个复选框？那么如今appearance 出现了。即使你并不想要让一个连接看起来老是像个按钮，下面这个例子也可让你了解到，只要你愿意就能够作到的：

示例

1 2 3 4

a { -webkit-appearance: button; -moz-appearance: button; }

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library, Mozilla Developer Network, Mozilla Developer Network,CSS3 appearance简介

text-align: -moz-center/-webkit-center

这是一个属性（或者精确来讲，是个“属性值”）的存在很让人惊喜啊。要让一个块级元素居中，你们一般将其设置为margin:0 auto。可是，如今你也能够将元素的容器的text-align属性设置为-moz-center 和 -webkit-center。相应的，你也能够经过设置-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左或者居右。

浏览器支持: WebKit, Gecko.

扩展阅读: Safari Developer Library

CSS 2.1属性

counter-increment

你是否常常但愿你可让一个有序列表或者一篇文章的全部标题自动编号？不幸的是，目前还没有有CSS3属性支持。可是在CSS 2.1中，counter-increment 提供了一个解决方案。这就意味着它已经出现好些年了，并且在IE8中就已经支持了。

配合:before 伪元素和content 属性，counter-increment能够为全部的HTML标签添加自动的编号。即使是嵌套的编码也是支持的。

示例

要给标题编码，先将计算器重设一下:

1	body {counter-reset: thecounter}

下面的样式让每个<h1>标题都有一个”Section”的前缀，而后其后面的数字自动的递增1(这是默认的，能够省略掉)，这里thecounter是计算器的名称:

1 2 3 4

.counter h1:before { counter-increment: thecounter 1; content:"Section"counter(thecounter)":"; }

示例

对于一个嵌套编码的列表，重设计数器，而后关掉<ol>的自动编码，由于它是无嵌套的:

1 2 3 4

ol { counter-reset: section; list-style-type: none; }

而后，每一个<li>设置为自动编号，分割符是一个点(.)，后面跟着一个空格

1 2 3 4

li:before { counter-increment: section; content: counters(section,".")""; }

HTML代码：

1 2 3 4 5 6 7 8 9 10

<ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 1.1 --> <li>item</li> <!-- 1.2 --> </ol> </li> <li>item</li> <!-- 3 --> <ol>

浏览器支持: CSS 2.1.，全部的现代浏览器，IE 7+.

扩展阅读: W3C，CSS content, counter-increment 和 counter-reset详解

quotes

你会由于你的CMS不知道如何正确转换引用符号而纠结么？那么开始使用quotes属性吧。这样你就能够自定义任何符号了。而后你就能够用:before和:after伪元素为任何指望的元素指定引号了，悲催的是，webkit浏览器不支持这个属性——经测试，chrome 11已经开始支持这个属性了（以前的版本没有测试）。

示例

前面的两个符号决定第一级引用内容的引号，后面的两个用于二级引用，以此类推：

1 2 3

q { quotes: '«' '»' "‹" "›"; }

下面两行用于为选定元素指定引号:

1 2	q:before {content: open-quote} q:after {content: close-quote}

这样，<p><q>This is a very <q>nice</q> quote.</q></p>看起来将会是酱紫的：
«This is a very ‹nice› quote.»

浏览器支持: CSS 2.1.,除了WebKit，IE 7和IE6的全部现代浏览器。不过chrome是支持的。。。

扩展阅读: W3C

问题：要直接的添加符号，CSS文档必需要设置为UTF-8吗？这是一个很纠结的问题。遗憾的是，我不能给出一个明确的答案。个人经验是，没必要要设置什么特定的字符集，而后utf-8字符集可能会出错，由于它显示错掉的字符(好比”»”)。而是用iso-8859-1 字符集，一切就都是正常的。

W3C这样描述：”因为上个例子中由’quotes’定义的引号方便的定位在电脑键盘上，高质量的字符则须要不一样的10646字符集。”

你或许据说过可是没有记住的CSS3属性

接近尾声，让咱们重温一些不太流行的以及不像border-radius和box-shadow那样被普遍需求的CSS3属性。

text-overflow

或许你会经常遇到这个问题：某个容器对于其内的文字来讲过小了，而后你不得不用javascript来截断字符串并添加”…”符号以免文字溢出。

忘掉它吧！采用CSS3和text-overflow: ellipsis，若是文字比它的容器的宽度要长的话，你就能够强制文字以”…”结束它。惟一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，可是貌似在最近的版本中将会提供支持。

示例

1 2 3 4

div { width: 100px; text-overflow: ellipsis; }

 

浏览器支持: CSS 3，全部浏览器的最新版本，除了Firefox，IE从IE6开始支持，听说Firefox到6.0也会提供支持的——但愿如此吧。

扩展阅读: W3C

word-wrap

当文字在一个比较窄的容器中时，它的某个部分可能会由于太长而不能正确的换行。好比连接就经常引发问题。若是你不想用overflow: hidden隐藏溢出的文字，那么你就能够设置 word-wrap 为break-word，它可让字符串在到达容器的宽度限制时换行。

示例

1 2 3 4

div { width: 50px; word-wrap: break-word; }

 

浏览器支持: CSS 3，全部现代浏览器。

扩展阅读: W3C

resize

若是你在使用Firefox或Chrome，那么你确定注意到了文本框的右下角默认有个小的手柄，它可让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。

可是它并不只限于textarea。它能够用于全部的HTML元素。horizontal 和 vertical 值用于控制调整水平方向仍是垂直方向。

请注意：对于display:block元素，若是设置了overflow:visible，resize属性将会无效(这一点原文描述不详——by 神飞)。

 

浏览器支持: CSS3, 除了Opera和IE觉得的其它最新的浏览器。

扩展阅读: Safari Developer Library

background-attachment

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。若是你想要背景图片随着内容而滚动，能够设置background-attachment:local。

 

浏览器支持: CSS 3，除了Firefox之外的全部现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

扩展阅读: W3C

text-rendering

随着愈来愈多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。因为目前尚未CSS属性控制显示在线字体的微妙细节，你能够利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不同。前者默认启用这个特性，然后者，你须要将其设置为optimizeLegibility。

 

浏览器支持: CSS3, 全部WebKit 和Firefox浏览器.

扩展阅读: W3C

transform: rotateX/transform: rotateY

若是你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

可是你是否也知道，它也能够更深刻的旋转的(好比，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

若是你鼠标通过这个元素，它将会旋转180°，倒转过来:

1 2 3

div:hover { transform: rotateY(180deg); }

 

小技巧:若是只是映射一个元素，你能够设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

扩展阅读: W3C，你须要知道的CSS3 动画技术

结语

正如你但愿见到的，还有不少未知的颇有用的属性。他们中的不少仍然处于试验性阶段而且可能一直这样甚至最终可能会被浏览器摈弃。而有些有望在后续版本中被全部的浏览器支持。

然而，很难判断判断他们中的一些是好是坏，WebKit特有的属性随着iOS和Android的成功显得愈来愈重要。固然，一些CSS3属性多多少少已经可使用了。

若是你不喜欢私有属性，你能够将它们视为实验直到能够在代码中实现以加强用户体验。同时，W3C的CSS validator 一样支持私有属性，它会返回警告而不是错误。

祝你体验快乐！