带来一篇CSS的将来:不为人知的CSS 2.1和CSS3属性

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
破洛洛文章简介：最巨大的财产埋没在Webkit的上面，并且在iPhone、iPad和Androidapps的时期，入手下手懂得它们会灰常有效。就连Firefox等利用的Gecko引擎，也供应了一些共同的属性。在本文中，我们将看一下不为人知的CSS2.1和CSS3属性和它们在古代扫瞄器中的撑持情形。
原文：CSS的将来：一些实验性CSS属性
译自：TheFutureOfCSS:ExperimentalCSSProperties
请尊敬版权，转载请说明来历，多谢！
只管古代扫瞄器已撑持了浩瀚的CSS3属性，可是年夜部分计划师和开辟职员貌似仍然在存眷于一些很“支流”的属性，如border-radius、box-shadow大概transform等。它们有优秀的文档、很好的测试而且最经常使用到，以是假如你比来在计划网站，你很难能离开它们。
可是，埋没在扫瞄器的年夜宝库中是一些初级的、被严峻低估的属性，可是它们并没有失掉太多的存眷。也许它们中的一些应当如许(被忽视)，可是别的的属性应当失掉更多的承认。最巨大的财产埋没在Webkit的上面，并且在iPhone、iPad和Androidapps的时期，入手下手懂得它们会灰常有效。就连Firefox等利用的Gecko引擎，也供应了一些共同的属性。在本文中，我们将看一下不为人知的CSS2.1和CSS3属性和它们在古代扫瞄器中的撑持情形。

登录/注册后可看大图

申明:关于每一个属性，我们这里划定：”WebKit”即指代利用Webkit内核的扫瞄器(Safari、Chrome、iPhone、iPad、Android等)，”Gecko“指代接纳Gecko内核的扫瞄器(Firefox等)。然后有的属性是官方CSS2.1.标准的一部分，这意味着更多的扫瞄器乃至一些陈旧的扫瞄器也会撑持它们。最初，一个CSS3的标签标明恪守这个尺度，被最新的扫瞄器版本——好比Firefox4、Chrome10、Safari5、Opera11.10和IE9撑持的属性。
WebKit特有属性

-webkit-mask

这个属性是相称壮大的，以是具体的先容超越了本文的范围，它十分值得深切研讨，由于它能够在实践使用中为你免却良多工夫。
-webkit-mask让为一个元素增加蒙板成为大概，从而你能够创立恣意外形的名堂。蒙板能够是CSS3突变大概半通明的PNG图片。蒙板元素的alpha值为0的时分会掩盖上面的元素，为1的时分会完整显现上面的内容。相干的属性有-webkit-mask-clip、-webkit-mask-position和-webkit-mask-repeat等，严峻依附来自于background中的语法。更多信息请检察webkit的博客和上面的链接。

登录/注册后可看大图

示例
图片蒙板:

1. 1234

复制代码

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

复制代码

示例
突变蒙板:

1. 1234

复制代码

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

复制代码

扩大浏览:SafariDeveloperLibrary
-webkit-text-stroke

CSS边框的一个不敷就是只要矩形的元素才干利用。-webkit-text-stroke能够为笔墨增加边框。它不仅能够设置笔墨边框的宽度，也能设置其色彩。并且，共同利用color:transparent属性，你还能够创立镂空的字体！
示例
为一切的<h1>题目设定一个2px宽的蓝色边框:

1. 1

复制代码

1. h1{-webkit-text-stroke:2pxblue}

复制代码

另外一个特征是，经由过程设定1px的通明边框，可让笔墨变得光滑:

1. 1

复制代码

1. h2{-webkit-text-stroke:1pxtransparent}

复制代码

创立白色镂空字体：

1. 1234

复制代码

1. h3{color:transparent;-webkit-text-stroke:4pxred;}

复制代码

登录/注册后可看大图

扩大浏览:SafariDeveloperLibrary
-webkit-nbsp-mode

换行偶然是很辣手的事变：偶然你但愿笔墨在得当的中央断行(而不是折行)，偶然你又不想如许。一个能把持这个的属性就是-webkit-nbsp-mode，它让你能够改动空缺符的举动，强迫笔墨在它被用到的中央断行。经由过程设置值为space便可完成。
扩大浏览:SafariDeveloperLibrary
-webkit-tap-highlight-color

这个属性只用于iOS(iPhone和iPad)。当你点击一个链接大概经由过程Javascript界说的可点击元素的时分，它就会呈现一个半通明的灰色背景。要重设这个体现，你能够设置-webkit-tap-highlight-color为任何色彩。
想要禁用这个高亮，设置色彩的alpha值为0便可。
示例
设置高亮色为50%通明的白色:

1. 1

复制代码

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

复制代码

扫瞄器撑持:只要iOS(iPhone和iPad).
扩大浏览:SafariDeveloperLibrary
zoom:reset

一般来讲，zoom是一个IE公用的属性。可是webkit也入手下手撑持它了，并且利用值reset，webkit能够完成不错的效果(风趣的是，IE不撑持这个值)。它让你重设失落扫瞄器中一般的缩放举动——假如某个元素被声了然zoom:reset，页面上的别的元素在用户缩小页面的时分城市随着缩小。
注：实在，我们经常使用来禁用chrome强迫字体巨细的时分用到的-webkit-text-size-adjust:none;也是能够完成相似的效果，分歧的是，设置该属性的元素内的笔墨不会被缩小/减少，可是页面上的别的元素则会变更——神飞
扩大浏览:SafariDeveloperLibrary
-webkit-margin-collapse

这个属性属于限定级的，可是它仍是十分值得存眷。一般，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被兼并到一同。
最多见的例子就是两个相邻的<p>元素会共享他们的margin值。想要把持这个体现，我们可使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默许值是collapse，值separate则中断共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会一般叠加。

登录/注册后可看大图

扩大浏览:SafariDeveloperLibrary
-webkit-box-reflect

你还记得几近每一个网站都把他们的网站logo大概头部的笔墨做成倒影的谁人年月吗？谢天谢地，谁人年月已已往了，可是假如你要在一些按钮、导航、大概其他UI元素上更好的利用这个手艺，-webkit-box-reflect是更好的选择。
这个属性承受above、below、left和right四个关头词，它们设置倒影的偏向，它们和一个设置元素和它的倒影建的间隔的数字一同利用。同时，蒙板图片也是一样撑持的(看下面的-webkit-mask部分，不要弄混了哈)。倒影会主动天生并对结构没有影响。上面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

登录/注册后可看大图

示例
这个倒影会呈现在它的父元素的上面并有5px的间距:

1. 1

复制代码

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

复制代码

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

1. 1

复制代码

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

复制代码

扩大浏览:SafariDeveloperLibrary
-webkit-marquee

另外一个属性让我们回到优美的夙昔：谁人各处marquee(赛马灯)的年月。风趣的是这个已被抛弃的标签反而在如今变的很有效，好比我们在对照小的手机屏幕上切换内容，假如不休行的话笔墨将不克不及完整显现。
ozPDA创立的这个天色的使用很好的利用了它。(假如你木有看到变更的笔墨，能够实验换一个乡村来体验。必要利用WebKit内核扫瞄器)
示例

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

复制代码

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

复制代码

要让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属性是最好的——神飞。
扩大浏览:SafariDeveloperLibrary
Gecko特有属性

font-size-adjust

这个有效的CSS3属性今朝只要Firefox撑持。我们能够用它来设定指定元素的笔墨巨细(font-size)应当相对小写字母的高度(x-height)而不是年夜写字母的高度(capheight)。好比，Verdana比同型号的Times字体更明晰，它有着更矮的x-height。为了填补这个缺点，我们能够用font-size-adjust属性来改正后者。
该属性在具有分歧的x-height的字体上十分有效。即使你在当心的利用小号字体，在成绩呈现时font-size-adjust也能供应办理计划。
示例
假如因为某种缘故原由用户的电脑上没有安装Verdana，那末Arial就会被修改，从而和Verdana有不异的长宽比(0.58)。

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

复制代码

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

复制代码

登录/注册后可看大图

扫瞄器撑持:Gecko.
扩大浏览:MozillaDeveloperNetwork
image-rendering

n年前，图片其实不会被依照其原始巨细显现，而是被计划师给缩放失落。取决于缩放的巨细和高低文，图片大概会在扫瞄器中展示的不太好大概爽性就是错失落了的。如今，扫瞄器有了更好的算法来显现缩放的图片，不外，在你的图片被缩放后完整的把持其体现也是件很赞的事变。
假如你的图片有对照锐的线条并但愿他们在缩放后坚持它，这个Gecko公有属性就显得出格有效。相干的值是-moz-crisp-edges。一样的算法也用在optimizeSpeed，而auto和optimizeQuality界说为尺度举动(用可行的最好质量来缩放元素)。image-rendering属性一样能够用于<video>和<canvas>元素，和用于背景图片一样。这是个CSS3尺度属性，可是今朝只要Firefox撑持。

登录/注册后可看大图

值得注重的是，-ms-interpolation-mode:bicubic，只管它是个IE专有属性。但是，它让InternetExplorer7在缩放图片后将其衬着为对照高的质量。因为这个扫瞄器默许处置的很烂，以是这个属性大概会很有效。
扫瞄器撑持:Gecko.
扩大浏览:MozillaDeveloperNetwork
-moz-border-top-colors

这个属性能够回类为’养眼’。它让你能够在border宽度年夜于1px的时分为其设置分歧的边框色彩。固然-moz-border-bottom-colors,-moz-border-left-colors和-moz-border-right-colors也是可用的。
不爽的是，没有一个简写的-moz-border-colors缩写，以是每一个边框都要分隔设置。同时，border-width要和给到的色彩的数目坚持分歧，不然，最初的谁人色彩值会添补到剩下的宽度。
示例
这个例子中，元素的摆布双方边框会是尺度的橙色，高低则有品种似突变的色彩——红黄蓝三色。

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

复制代码

1. 12341

复制代码

登录/注册后可看大图

扫瞄器撑持:Gecko.
扩大浏览:MozillaDeveloperNetwork
夹杂属性

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

也许你经常不但愿用户在你的网站上选择文本，不管是不是是出于版权的缘故原由。一般人人会有js来完成，另外一个计划就是，将-webkit-user-select和-moz-user-select的值设为none。
请审慎利用这个属性：由于年夜部分用户是来检察信息的，他们能够复制并存储上去以备未来之用，以是这类办法既无用也有效。假如你禁用了复制粘贴功效，用户仍是能够经由过程检察源文件来猎取到他们想要的内容。弄不懂这个属性为何会被webkit和gecko撑持。
扫瞄器撑持:WebKit,Gecko.
扩大浏览:SafariDeveloperLibrary,MozillaDeveloperNetwork
-webkit-appearance和-moz-appearance

你已经想过将一张图片假装成单选按钮么？大概，一个输出框看起来像一个复选框？那末如今appearance呈现了。即使你其实不想要让一个链接看起来老是像个按钮，上面这个例子也能够让你懂得到，只需你乐意就能够做到的：
示例

1. 1234

复制代码

1. 12343

复制代码

扫瞄器撑持:WebKit,Gecko.
扩大浏览:SafariDeveloperLibrary,MozillaDeveloperNetwork,MozillaDeveloperNetwork,CSS3appearance简介
text-align:-moz-center/-webkit-center

这是一个属性（大概准确来讲，是个“属性值”）的存在很让人欣喜啊。要让一个块级元素居中，人人一般将其设置为margin:0auto。可是，如今你也能够将元素的容器的text-align属性设置为-moz-center和-webkit-center。响应的，你也能够经由过程设置-moz-left、-webkit-left或-moz-right、-webkit-right将元素居左大概居右。
扫瞄器撑持:WebKit,Gecko.
扩大浏览:SafariDeveloperLibrary
CSS2.1属性

counter-increment

你是不是常常但愿你可让一个有序列表大概一篇文章的一切题目主动编号？不幸的是，今朝还没有有CSS3属性撑持。可是在CSS2.1中，counter-increment供应了一个办理计划。这就意味着它已呈现好些年了，并且在IE8中就已撑持了。
共同:before伪元素和content属性，counter-increment能够为一切的HTML标签增加主动的编号。即使是嵌套的编码也是撑持的。
示例
要给题目编码，先将盘算重视设一下:

1. 1

复制代码

1. 12345

复制代码

上面的款式让每个<h1>题目都有一个”Section”的前缀，然后厥后面的数字主动的递增1(这是默许的，能够省略失落)，这里thecounter是盘算器的称号:

1. 1234

复制代码

1. 12347

复制代码

示例
关于一个嵌套编码的列表，重计划数器，然后关失落<ol>的主动编码，由于它是无嵌套的:

1. 1234

复制代码

1. 12349

复制代码

然后，每一个<li>设置为主动编号，支解符是一个点(.)，前面随着一个空格

1. 1234

复制代码

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

复制代码

HTML代码：

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

复制代码

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

复制代码

扫瞄器撑持:CSS2.1.，一切的古代扫瞄器，IE7+.
扩大浏览:W3C，CSScontent,counter-increment和counter-reset详解
quotes

你会由于你的CMS不晓得怎样准确转换援用标记而纠结么？那末入手下手利用quotes属性吧。如许你就能够自界说任何标记了。然后你就能够用:before和:after伪元素为任何希冀的元素指定引号了，悲催的是，webkit扫瞄器不撑持这个属性——经测试，chrome11已入手下手撑持这个属性了（之前的版本没有测试）。
示例
后面的两个标记决意第一级援用内容的引号，前面的两个用于二级援用，以此类推：

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

复制代码

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

复制代码

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

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

复制代码

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

复制代码

如许，<p><q>Thisisavery<q>nice</q>quote.</q></p>看起来将会是酱紫的：

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。