仓酷云

标题: 来讲讲：CSS3中的5个风趣的新手艺 [打印本页]

作者: 深爱那片海 时间: 2015-1-16 00:01
标题: 来讲讲：CSS3中的5个风趣的新手艺
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。
网页制造WEB文章简介：网页教授教养将在这篇文章向人人展现CSS中的5个风趣的新手艺:圆角、一般圆角、不通明度、暗影和调剂元素巨细.
CSS是尽人皆知且使用普遍的网站款式言语，在它的版本三(CSS3)企图中，新增了一些可以节俭工夫的特征。只管只要以后最新了扫瞄器版本才干撑持这些效果，但懂得它们仍是必需且很风趣味性的。网页教授教养将在这篇文章向人人展现CSS中的5个风趣的新手艺:圆角、一般圆角、不通明度、暗影和调剂元素巨细。
相干文章：先容CSS3利用技能5个
1：基础标志

在我们入手下手这个教程之前，先来创立全部教程都要利用的基础标志。
我们的xHTML必要一下div元素:

#round,利用CSS3代码完成圆角.
#indie,使用一般的几个圆角.
#opacity,展现新的CSS3完成不通明度的体例.
#shadow,展现不利用Photoshop的情形下，利用CSS3来完成暗影效果.
#resize,展现怎样利用某种CSS来完成重设巨细的效果.

综上所述，我们的xHTML应当是如许的:

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>
<title>AnIntroductiontoCSS3;ANettutsTutorial</title>
<linkhref=”style.css”rel=”stylesheet”type=”text/css”/>
</head>
<body>
<divid=”wrapper”>
<divid=”round”></div>
<divid=”indie”></div>
<divid=”opacity”></div>
<divid=”shadow”></div>
<divid=”resize”>
<imgsrc=”image.jpg”alt=”resizableimage”width=”200″height=”200″>
</div>
</div>
</body>
</html>

上面来创立基础CSS文件:

body{
background-color:#fff;
}
#wrapper{
width:100%;
height:100%;
}
div{
width:300px;
height:300px;
margin:10px;
float:left;
}

正如你下面看到的，我们给每一个div元素300px的宽和高，并让它们向左浮动，全部页面的div都留给我们在前面的事情中增加款式。看到本信息，申明该文章来历于网页教授教养www.poluoluo.com，假如文章不完全请到网页教授教养poluoluo.com扫瞄！
2:圆角

今朝而言，创立圆角的办法有良多，但都很贫苦。最经常使用的办法:起首，你要创立圆角的图片；然后，你要创立良多html元素并利用背景图象的体例显现圆角。详细流程你我都很分明。
这个成绩将在CSS3中很复杂的办理失落，那就是叫做“border-radius”的属性。我们先创立一个玄色的div元素并给他设置玄色的边框。边框就是要完成“border-radius”属性效果的条件。
像如许:

#round{
background-color:#000;
border:1pxsolid#000;
}

如今你已创立了div元素，它看起来和你预期的模样一样，300px款和高有楞有角且是玄色的。上面我们来增加完成圆角的代码，它是云云的简便，仅仅必要两行代码。

#round{
background-color:#000;
border:1pxsolid#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

在这里，我们增加了两行相似的代码，-moz-合用于Firefox扫瞄器，而-webkit-则是用于Safari/Chrome扫瞄器。
注:今朝为止IE扫瞄器不撑持border-radius属性，以是假如想让IE也有圆角效果，那末就要独自增加圆角了。
border-radius这个属性直译过去是边框半径的意义，就好像Photoshop一样，它的值越年夜，圆角也就越年夜。

网页制造WEB文章简介：网页教授教养将在这篇文章向人人展现CSS中的5个风趣的新手艺:圆角、一般圆角、不通明度、暗影和调剂元素巨细.

3:一般的圆角

假如依照已往的习气做法，会华侈你良多工夫，如今CSS3能疾速办理!
我们如今只想让div的右上和右下是圆角，那末仅需稍作修正:

#indie{
background-color:#000;
border:1pxsolid#000;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}

试想一下这类做法会用在网页中的甚么元素呢？对！就是标签式的导航按钮！
4:以CSS3的体例修正不通明度

如今你能够按常规编写几行代码来完成不通明度的效果(hack)。不外CSS3简化了这个流程。加此信息网页教授教养（poluoluo.com）公布目标是为了避免你变懒！poluoluo.com不主意收罗！
这行代码很好记，仅仅是“opacity:value;”:

#opacity{
background-color:#000;
opacity:0.3;
}

5:暗影效果

完成暗影也有良多办法，最经常使用的就是利用Photoshop制造成暗影图片，然后使用到背景属性中。但CSS3让你的事情更无效率，不幸的是，今朝只要Safari和Chrome撑持这个新特征。
仅仅必要一行代码，不外它有4个分歧的值:

-webkit-box-shadow:3px5px10px#ccc;

上面我来注释一下这四个值都代表甚么，第一个3px是指定暗影与div元素之间的程度(横向)间隔，第二个5px指的是暗影与div之间的垂直(纵向)间隔，第三个10px指的是暗影的含混度(相似于photoshop中的成仙)，值越年夜越精致。最初的值不说人人也晓得，就是暗影的色彩。
我们终极暗影效果代码；

#shadow{
background-color:#fff;
border:1pxsolid#000;
-webkit-box-shadow:3px5px10px#ccc;
}

正如你看到的，我们个这个div设置了红色的背景，玄色的边框和亮灰色的暗影。

网页制造WEB文章简介：网页教授教养将在这篇文章向人人展现CSS中的5个风趣的新手艺:圆角、一般圆角、不通明度、暗影和调剂元素巨细.

6:调剂巨细

在最新版本的CSS中，调剂元素的尺寸已成为大概（不外今朝仅Safari撑持）看到本信息申明该文是经由过程网页教授教养（poluoluo.com）收拾公布的，请不要删失落！
利用这个代码今后，我们的元素的右下角会呈现一个小三角以提醒用户这个元素是能够调剂尺寸的。代码仍然很复杂，能够说仅必要一行代码，固然你还能够共同利用一些已经利用过的属性，好比”max-width”,“max-height”,“min-width”和“min-height”.

#resize{
background-color:#fff;
border:1pxsolid#000;
resize:both;
overflow:auto;
}

在这里次要说一下resize和overflow属性，resize:both;的意义就是一切边都能够调剂尺寸，它的值另有horizontal和vertical，望文生义，就是横向和纵向。而overflow是为了共同resize事情的，在这里利用auto.
总结

怎样，你在这篇文章中有无甚么劳绩呢？固然如今唯一很多数的扫瞄器撑持CSS3，但不成否定的是CSS3切实其实会为我们的事情节俭更多的工夫。假如你对渐进加强有所懂得和熟悉的话，我想你会怅然承受CSS3这个壮大的新版本的。不要再把你的工夫都花在IE6上了，那样你只能会是过期的前端开辟工程师。

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

作者: 飘灵儿 时间: 2015-1-17 23:52
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 爱飞 时间: 2015-1-25 20:14
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 谁可相欹 时间: 2015-2-4 00:07
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 小魔女 时间: 2015-2-9 08:28
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 小女巫 时间: 2015-2-27 05:10
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 蒙在股里 时间: 2015-3-9 00:08
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 活着的死人 时间: 2015-3-16 21:38
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

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