html5+css3新特性,css3有哪些新特性 包含哪些模块

css3 盒子模型

　　 css3可以通过确定箱子尺寸来指定箱子型号。有两个值：content-box和border-box，所以我们计算框大小的方式已经改变了。

　　它可以分为两种情况：

　　框大小：内容框的大小是宽度填充边框(以前是默认的)

　　框大小：边框-框框的大小是宽度。

　　当我们学习盒子模型时，我们知道填充和边框会放大盒子。如果我们将盒子模型改为盒子大小：边框-盒子，那么填充和边框不会扩大盒子(假设填充和边框不会超过宽度)

示例

　　 !DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-widt h，initial-scale=1.0 title document/title style div { box-sizing:border-box；边框：2px纯红；填充：3px宽度：200px高度：200px}/style/head body div/div/body/html

　　从图中可以看出，当我去掉框定尺寸：border-box；之后，盒子的宽度和高度将变为210px，并添加了填充和边框。

css3 滤镜filter(可做图片模糊处理)

　　 filter css属性将图形效果(如模糊或颜色偏移)应用于元素。

　　Filter:函数()；比如：滤镜：模糊(5px)；模糊模糊处理，值越大越模糊。

　　(现在只需要记住函数blur()

示例

　　 !DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-widt h，initial-scale=1.0 title document/title style div { width:200 px；} div img{宽度：100%；垂直对齐：底部；滤镜：模糊(5px)；/*必须添加单元px */}/style/head body div img src= 123 . jpg alt= /div/body/html。

　　你可以看到照片很模糊。

css3 calc函数

　　 calc()这个css函数允许您在声明css属性值时执行一些计算。

　　宽度：calc(100%-80px)；

　　可以在括号中使用-*/进行计算。

示例

　　有两个盒子。无论父框的宽度如何变化，让子框的宽度始终比父框小30px。

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-widt h，initial-scale=1.0 title document/title style。父亲{宽度：200px高度：100px背景色：粉色；} .son { width:calc(100%-30px)；高度：50px背景色：蓝色；}/style/head body div class= father div class= son /div/div/body/html

　　从上图可以看出，子框的宽度会随着父框的宽度而变化。

css3 过渡(transition) (重要)

　　过渡是CSS3中颠覆性的特性之一。我们可以在元素从一种风格变为另一种风格时添加效果，而无需使用Flash动画或JavaScript。

　　过渡动画：它是从一种状态到另一种状态的逐渐过渡，可以使我们的页面看起来更好，更有活力。虽然低版本浏览器不支持(ie9以下版本)，但不会影响页面布局。

　　现在我们经常和：hover一起用。

　　过渡：运动曲线开始时，要过渡的属性需要时间；

　　1.属性：你想要改变的css属性，宽度，高度，背景颜色，内外边距。如果你想让所有的属性都改变和转换，只需要写一个all。

　　2.花费的时间：单位是秒(你必须写单位)，如0.5s

　　3.运动曲线：默认为缓动(可以省略)

　　4.何时开始：单位是秒(必须写单位)。可以设置延时触发时间，默认为0s(可以省略)。

　　运动曲线

　　使用转换公式：谁进行转换，谁就被添加。

示例

　　 !DOCTYPE html html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width，initial-scale=1.0 标题文档/标题样式div { width:200 px；高度：100像素背景色：天蓝色；/*过渡：要过渡的属性花费时间运动曲线何时开始；*//* 1.给宽度加过渡*//*过渡：宽度0.5s缓0s；*//* 2.给宽度和高度加过渡，多个属性中间用逗号分割*//*过渡：宽度0.5s，高度0.5s*//* 3.对：悬停里的全部属性加过渡，用全部就行*/过渡：全0.5s}分度：悬停{宽度：400像素高度：200像素背景色：粉色；}/style/head body div/div/body/html

案例-进度条

　　 !DOCTYPE html lang= en head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width，initial-scale=1.0 标题文档/标题样式.酒吧宽度：150像素高度：15px边框：1px纯红；边框-半径：7px填充：1px}。bar_in{宽度：50%;身高：100%;背景色：红色；过渡：宽度。5s；} .杠：悬停酒吧_在{宽度：100%;}/style/head body div class=" bar " div class= bar _ in /div/div/body/html

结语

　　 以上就是css3新特性的应用示例分析的详细内容，更多关于css3新特性应用的资料请关注其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。