当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3实例教程 探索cal()功能

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3实例教程 探索cal()功能 功能(12)cal(1)Tag(145)实例(55)探索(2)CSS3(90)教程(56)
Tag:功能 探索 教程 实例 功效 摸索 教程 实例 Cla()功能是W3C推举的功能,所以你会猜到哪个浏览器会始终支持? 兴许你的猜想错了。在笔者写这篇文章的时候,只有IE9支撑, CSS3实例教程 transitions测试学习 ,Firefox也支持(须要其特有的前缀):-moz-cla
CSS3实例教程 探索cal()功能》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332252013.htm
Tag:功能   探索   教程   实例    ,CSS3实例教程 使用border-radius制作文本文档图标; 功效   摸索   教程   实例     Cla()功能是W3C推举的功能,所以你会猜到哪个浏览器会始终支持? 兴许你的猜想错了。在笔者写这篇文章的时候,只有IE9支撑,CSS3实例教程 transitions测试学习,Firefox也支持(须要其特有的前缀):-moz-cla()。Webkit内核的浏览器目前还没有支持(如Chrome和Safari)或者是Opera,改功能很有用的,信任用不了多久这些浏览器都会支持的。 荣幸的是你能够在你的款式表(CSS )中使用加强样式: element1, #element2 { width: 45%; /* all browsers */ width: -moz-calc(50% - 30px); /* Firefox 4+ */ width: calc(50% - 30px); /* IE9+ and future browsers */ } 请谨记你需要增加相应的调剂(以面对不同的浏览器)。 #element2 { margin-left: 10%; /* all browsers */ margin-left: -moz-calc(60px); /* Firefox 4+ */ margin-left: calc(60px); /* IE9+ and future browsers */ } CSS3 的min() 和 max() 如果你爱好cal()元素,你可能也会细化min()和max()功能,他们可以说明2个或2个以上用逗号隔开的元素值并且可以返回最大值或者最小值。 #myelement { width: max(300px, 30%,CSS3实例教程 box-shadow阴影和表格阴影, 30em); font-size: min(10px, 0.6em); } 这个功能在避免font过于大或者十分小的情形下很有用,但是可怜的是目前比拟古代的浏览器都不支持min()跟max()功能,我们只能默默等待浏览器们支持吧~~ --> [网站建设之]CSS3实例教程:探索cal()功能

 ,CSS3实例学习教程 data类型的Url;

CSS3中有良多的暗藏的模块与功能。在这里咱们将探索cal()功能;这个功能可能会转变你以前设计布局的方法,灰常的强悍~~

CSS3的cal()功能是用来计算长度(lengths),CSS3如何制作遨游LOGO,数字(numbers),角度(angles),过渡(transition)/动画时光(animation times)或者声音频率(sound frequencies)。它将容许你应用混共计算类型—在CSS3中也是一个异样强盛的概念,css3基础教程:详解border color

假设一个网站的设计要包括2个浮动的元素,CSS3基础教程:详解background-size,你想要用一个60px的水平线将其分成2个雷同宽度的元素,听起来仿佛轻易?如果页面设计的是960px,那么很容易,每个都是450px。

然而如果改元素是一个浮动框或者动态的布局怎么办?如果页面设计的是600px,那么大局部的设计者将会将水平线设置为10%,剩下的各45%,在宽屏或者方屏的阅读窗口中将会变形或者有边距!

幸运的是,新功能cal()功能许可women计算宽度。在上面的例子中,我们就可以将其设置为总宽度的50%-30px,例如:

#element1,CSS3基础教程:box-shadow属性, #element2 { float: left; width: calc(50% - 30px); } #element2 { margin-left: 60px,css3圆角IE的兼容方法; }

假如你想让程度线的大小是相对字体大小儿定,如4em,没问题:

#element1, #element2 { width: calc(50% - 2em); }

或者你想要在元素四周放一个2px的border,也不问题:

#element1,CSS3和jQuery动态时钟制作过程, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

笔者倡议尽量是盘算简练些,但是庞杂的计算是可能实现的,例如:

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

该元素的浏览器支持情况:


(责任编辑:网站建设)
CSS3实例教程 探索cal()功能相关文章
上一篇:CSS3实例教程 使用border-radius制作文本文档图标 下一篇:CSS3实例教程 盒模型添加阴影属性box-shadow
回到顶部