仓酷云

标题: 来讲讲：5个匡助你完成将来的网页计划的CSS3技能 [打印本页]

作者: 简单生活 时间: 2015-1-15 23:23
标题: 来讲讲：5个匡助你完成将来的网页计划的CSS3技能
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
网页制造poluoluo文章简介：CSS3+HTML5完成将来Web计划.
CSS3+HTML5是将来的Web，它们都还没有正式到来，固然很多扫瞄器已入手下手对它们供应部分撑持。本文先容了5个CSS3技能，能够帮你完成将来的Web，不外，这些手艺不该该用在正式的客户项目，它们更合适你的团体博客站点，Web计划社区，大概不会有客户向你赞扬的场所。
1.圆角效果

CSS3新功效中最经常使用的一项是圆角效果，尺度HTML方块工具是90度方角的，CSS3能够帮你完成圆角。
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
乃至单个角也能够完成圆角，不外Mozilla和Webkit的语法稍有分歧:
-moz-border-radius-topleft:20px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-right-radius:20px;-webkit-border-top-left-radius:20px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;

所撑持的扫瞄器：Firefox,Safari,Chrome
用例:Twitter.

请参阅:

W3CWorkingDraft
Border-radiusonCSS3.info
TheArtofWeb

2.图形化界限

望文生义，图形化界限就是同意利用图片作为工具的界限，语法以下:
border:5pxsolid#cccccc;-webkit-border-image:url(/images/border-image.png)5repeat;-moz-border-image:url(/images/border-image.png)5repeat;border-image:url(/images/border-image.png)5repeat;
这里，border:5px设定了界限的宽度，然后，每一个界限的图片界说告知扫瞄器，利用图片的多年夜一部分来充任界限。界限图片还能够针对每条边独自设置：
border-bottom-right-imageborder-bottom-imageborder-bottom-left-imageborder-left-imageborder-top-left-imageborder-top-imageborder-top-right-imageborder-right-image

撑持的扫瞄器：Firefox3.1,Safari,Chrome.
用例:Blog.SpoonGraphics.

请参考:

W3CWorkingDraft
Border-imageonCSS3.info
Border-imageinFirefox

网页制造poluoluo文章简介：CSS3+HTML5完成将来Web计划.

3.块暗影与笔墨暗影

暗影效果曾让Web计划师既爱又恨，如今，有了CSS3，你不再必要Photoshop，已有网站在利用这个功效了，如24Wayswebsite.

-webkit-box-shadow:10px10px25px#ccc;-moz-box-shadow:10px10px25px#ccc;box-shadow:10px10px25px#ccc;

复制代码

前两个属性设置暗影的X/Y位移，这里分离是10px，第3个属性界说暗影的虚化水平，最初一个设置暗影的色彩。笔墨暗影也能够如许设置：

text-shadow:2px2px5px#ccc;

复制代码

撑持的扫瞄器：Firefox3.1,Safari,Chrome(只撑持Box暗影)，Opera(只撑持笔墨暗影).前3个数字暗示红绿蓝三色的值，最初一个值代表通明度，别的，我们还可使用opacity完成通明度（今朝的灯箱效果多利用该技能–译者）
用例:24Ways.

请参考:

W3CWorkingDraft
Box-shadowonCSS3.info
W3CWorkingDraft
Text-shadowonCSS3.info

4.利用RGBA完成通明效果

今朝，Web计划中的通明效果次要靠PNG图片完成（但在IE扫瞄器撑持得其实不好–译者），在CSS3，能够间接完成通明效果。

rgba(200,54,54,0.5);/*example:*/background:rgba(200,54,54,0.5);/*or*/color:rgba(200,54,54,0.5);

复制代码

color:#000;opacity:0.5;

复制代码

[/code]

撑持的扫瞄器：Firefox,Safari,Chrome,Opera(opacity)和IE7(opacity,withfixes).
用例:24Ways(RGBA).

请参考:

W3CWorkingDraft
RGBAonCSS3.info
PureCSSOpacity

网页制造poluoluo文章简介：CSS3+HTML5完成将来Web计划.

5.利用@Font-Face完成定制字体

Web计划中有几种字体是对照平安的，如Arial,Helvetica,Verdana,Georgia,ComicSans（中文的，一样平常来讲宋体是独一平安的–译者），如今，利用CSS3的@font-face能够本人指定字体，不外由于牵涉到版权成绩，实践能用的字体也是无限的(别的，体积复杂的中笔墨体也是一个欠好办理的成绩–译者)。
语法以下:

@font-face{font-family:Anivers;src:url(/images/Anivers.otf)format(opentype);}

复制代码

撑持的扫瞄器：Firefox3.1,Safari,Opera10andIE7(必要一番周折，假如你不怕贫苦，能够在IE完成这个功效，请参考：makefont-faceworkinIE)
用例:TapTapTap.

请参阅：

Fontsavailableforfont-faceembedding
Font-faceinIE,makingWebfontswork
Webfonts,thenextbigthing–AListApart

固然CSS3尚在开辟中，下面提到的这些功效已能够在部分扫瞄器中利用了，特别是Safari。不幸的是，Safari并不是支流扫瞄器。
Firefox今朝具有大批用户基本，别的，行将推出的Firefox3.1撑持很多CSS3效果，由于Firefox用户的晋级主动性很高，因而，会有很多用户能够提早体验CSS3的新功效。
GoogleChrome往年方才公布，它基于Webkit引擎，因而和Safari很类似，由于Safari次要用于Mac市场，Chrome能够恰好填补Windows市场的空白。
依据统计数据，2008年11月止，44.2%的用户利用Firefox,3.1%利用Chrome,2.7%利用Safari，意味着CSS3的部分功效已能够撑持近半Internet用户，而在Web计划圈子，这个比例大概更高，约莫有73.6%（Blog.SpoonGraphics供应的数据）
6.负面要素

下面报告的这些CSS3功效会给你的网站带来杰出的效果，但仍有一些负面的要素必需思索：

InternetExplorer:46%的Internet没法看到这些效果，因而不要将这些器材用于主要的计划。同时包管，在这些效果不起感化的中央，有替换计划可用。
CSS考证成绩:这些CSS3功效并不是终极版本，今朝分歧的扫瞄器利用分歧标签完成这些功效，大概为你的StyleSheet带来考证上的成绩。
痴肥代码:由于分歧扫瞄器要利用分歧界说语法，终极将招致你的CSS代码非常痴肥。
不妥的利用:对这些效果的不妥利用，大概带来一些不良成果，暗影效果特别云云。

英文原文：PushYourWebDesignIntoTheFutureWithCSS3
中文翻译：comsharp
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

作者: 冷月葬花魂 时间: 2015-1-17 22:31
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 老尸 时间: 2015-1-24 15:13
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 再现理想 时间: 2015-2-1 20:14
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 乐观 时间: 2015-2-7 16:40
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 不帅 时间: 2015-2-22 20:46
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 透明 时间: 2015-3-7 04:54
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 活着的死人 时间: 2015-3-14 13:54
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 海妖 时间: 2015-3-21 10:46
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

欢迎光临仓酷云 (http://www.ckuyun.com/)