重庆潼南网站建设哪家便宜,网站制作预付款会计分录,外贸网站建设系统,网站制作上哪学校尽管现代浏览器已经支持了众多的CSS3属性#xff0c;但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性#xff0c;如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到#xff0c;所以如果你最近在设计网站#xff0c;…尽管现代浏览器已经支持了众多的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 4、Chrome 10、Safari 5、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宽的蓝色边框: 1h1 {-webkit-text-stroke: 2px blue} 另一个特性是通过设定1px的透明边框可以让文字变得平滑: 1h2 {-webkit-text-stroke: 1px transparent} 创建红色镂空字体 1
2
3
4h3 {
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也开始支持它了而且使用值resetwebkit可以实现不错的效果(有趣的是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
5p {
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
5div {
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
4a {
-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标签添加自动的编号。即便是嵌套的编码也是支持的。 示例 要给标题编码先将计算器重设一下: 1body {counter-reset: thecounter} 下面的样式让每一个h1标题都有一个”Section”的前缀然后其后面的数字自动的递增1(这是默认的可以省略掉)这里thecounter是计算器的名称: 1
2
3
4.counter h1:before {
counter-increment: thecounter 1;
content:Sectioncounter(thecounter):;
} 示例 对于一个嵌套编码的列表重设计数器然后关掉ol的自动编码因为它是无嵌套的: 1
2
3
4ol {
counter-reset: section;
list-style-type: none;
} 然后每个li设置为自动编号分割符是一个点(.)后面跟着一个空格 1
2
3
4li:before {
counter-increment: section;
content: counters(section,.);
} HTML代码 1
2
3
4
5
6
7
8
9
10olliitem/li !-- 1 --liitem !-- 2 --olliitem/li !-- 1.1 --liitem/li !-- 1.2 --/ol/liliitem/li !-- 3 --
ol 浏览器支持: CSS 2.1.所有的现代浏览器IE 7. 扩展阅读: W3CCSS content, counter-increment 和 counter-reset详解 quotes 你会因为你的CMS不知道如何正确转换引用符号而纠结么那么开始使用quotes属性吧。这样你就可以自定义任何符号了。然后你就可以用:before和:after伪元素为任何期望的元素指定引号了悲催的是webkit浏览器不支持这个属性——经测试chrome 11已经开始支持这个属性了之前的版本没有测试。 示例 前面的两个符号决定第一级引用内容的引号后面的两个用于二级引用以此类推 1
2
3q {
quotes: « » ‹ ›;
} 下面两行用于为选定元素指定引号: 1
2q:before {content: open-quote}
q:after {content: close-quote} 这样pqThis is a very qnice/q quote./q/p看起来将会是酱紫的«This is a very ‹nice› quote.» 浏览器支持: CSS 2.1.,除了WebKitIE 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
4div {
width: 100px;
text-overflow: ellipsis;
} 浏览器支持: CSS 3所有浏览器的最新版本除了FirefoxIE从IE6开始支持据说Firefox到6.0也会提供支持的——希望如此吧。 扩展阅读: W3C word-wrap 当文字在一个比较窄的容器中时它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字那么你就可以设置 word-wrap 为break-word它可以让字符串在到达容器的宽度限制时换行。 示例 1
2
3
4div {
width: 50px;
word-wrap: break-word;
} 浏览器支持: CSS 3所有现代浏览器。 扩展阅读: W3C resize 如果你在使用Firefox或Chrome那么你肯定注意到了文本框的右下角默认有个小的手柄它可以让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。 但是它并不仅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制调整水平方向还是垂直方向。 请注意对于display:block元素如果设置了overflow:visibleresize属性将会无效(这一点原文描述不详——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
3div: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 同样支持私有属性它会返回警告而不是错误。 祝你体验快乐转载于:https://www.cnblogs.com/zhaodifont/p/3824379.html
