• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

你应当了解的5个CSS3新技术

来历: www.tbea-hb.com 修正:织梦吧 时刻:2018-09-19点击:

CSS是众所周知且运用广泛的网站款式言语,在它的版别三(CSS3)方案中,新增了一些能够节约时刻的特性。尽管只要当时最新了浏览器版别才干支撑这些 效果,但了解它们仍是有必要且很风趣味性的。暴风彬彬将在这篇文章向咱们展现CSS中的5个风趣的新技术:圆角、单个圆角、不通明度、暗影和调整元素巨细。

1:根本符号

css3-教程
在咱们开端这个教程之前,先来创立整个教程都要运用的根本符号。
咱们的xHTML需求一下div元素:

  • #round, 运用CSS3代码完成圆角.
  • #indie, 运用单个的几个圆角.
  • #opacity, 展现新的CSS3完成不通明度的办法.
  • #shadow,展现不运用的情况下,运用CSS3来完成暗影效果.
  • #resize, 展现怎么运用某种CSS来完成重设巨细的效果.

综上所述,咱们的xHTML应该是这样的:

 





你应当了解的5个CSS3新技术_




 

 

 

 


”resizable


 

下面来创立根本CSS文件:

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

正如你上面看到的,咱们给每个div元素300px的宽和高,并让它们向左起浮,整个页面的div都留给咱们在后面的作业中增加款式。

2:圆角

css3-特性
现在而言,创立圆角的办法有许多,但都很费事。最常用的办法:首要,你要创立圆角的图片;然后,你要创立许多html元素并运用布景图画的办法显现圆角。详细流程你我都很清楚。

这个问题将在CSS3中很简单的处理掉,那就是叫做“border-radius”的特点。咱们先创立一个黑色的div元素并给他设置黑色的边框。边框就是要完成“border-radius”特点效果的条件。
像这样:

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

现在你现已创立了div元素,它看起来和你预期的姿态相同,300px款和高有楞有角且是黑色的。下面咱们来增加完成圆角的代码,它是如此的简练,只是需求两行代码。

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

在这里,咱们增加了两行相似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。
注:现在为止IE浏览器不支撑border-radius特点,所以假如想让IE也有圆角效果,那么就要独自增加圆角了。
border-radius这个特点直译过来是边框半径的意思,就如同相同,它的值越大,圆角也就越大。

3:单个的圆角

css3-技巧
假如依照曩昔的习气做法,会糟蹋你许多时刻,现在CSS3能快速处理!
咱们现在只想让div的右上和右下是圆角,那么仅需稍作修正:

#indie {
background-color: #000;
border: 1px solid #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的办法修正不通明度

css3-教程
现在你能够按常规编写几行代码来完成不通明度的效果(hack)。不过CSS3简化了这个流程。
这行代码很好记,只是是 “opacity: value;”:

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

5:暗影效果

css3-教程
完成暗影也有许多办法,最常用的就是运用制造成暗影图片,然后运用到布景特点中。但CSS3让你的作业更有功率,不幸的是,现在只要Safari和Chrome支撑这个新特性。
只是需求一行代码,不过它有4个不同的值:

-webkit-box-shadow: 3px 5px 10px #ccc;

下 面我来解释一下这四个值都代表什么,第一个3px是指定暗影与div元素之间的水平(横向)间隔,第二个5px指的是暗影与div之间的笔直(纵向)距 离,第三个10px指的是暗影的含糊度(相似于photoshop中的羽化),值越大越细腻。终究的值不说咱们也知道,就是暗影的色彩。
咱们终究暗影效果代码;

#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

正如你看到的,咱们个这个div设置了白色的布景,黑色的边框和亮灰色的暗影。

6:调整巨细

css3-教程
在最新版别的CSS中,调整元素的尺度现已成为可能(不过现在仅Safari支撑)

使 用这个代码往后,咱们的元素的右下角会呈现一个小三角以提示用户这个元素是能够调整尺度的。代码仍然很简单,能够说仅需求一行代码,当然你还能够合作运用 一些从前运用过的特点,比方”max-width”, “max-height”, “min-width”和 “min-height”.

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

在这里主要说一下resize和overflow特点,resize:both;的意思就是所有边都能够调整尺度,它的值还有horizontalvertical,望文生义,就是横向和纵向。而overflow是为了合作resize作业的,在这里运用auto.

总结

css3-教程
怎 么样,你在这篇文章中有没有什么收成呢?尽管现在仅有很少量的浏览器支撑CSS3,但不可否认的是CSS3确实会为咱们的作业节约更多的时刻。假如你对渐 进增强有所了解和知道的话,我想你会欣然接受CSS3这个强壮的新版别的。不要再把你的时刻都花在IE6上了,那样你只能会是过期的前端开发工程师。

英文原文:
翻译原文:

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,