• [织梦吧]唯一域名: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应该是这样的:

 










 

 

 

 


”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上了,那样你只能会是过时的前端开发工程师。

英文原文:
翻译原文:

 

m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.tbea-hb.com 网站地图
  • 联系我们 1978130638@qq.com ,