一 css3概要
css3是css的新一代国际标准.
css3向后相容晚期的css版.
许多关键的新功能:
border radius:容许他们为原素建立梯形.
border images:容许他们选定两个影像做为原素周遭的前面板.
multiple backgrounds:将数个大背景应用于原素.
动画电影(animations)和特技(effects),和更多其它新功能.
box shadow(盒阴霾)
采用box-shadow特性,能透过选定色调,大小不一,模糊不清和偏转来将两个或数个阴霾附带到原素.
gradients(蓝紫色)
css3蓝紫色容许他们将原素的大背景色调增设为蓝紫色.有三种类别的蓝紫色需用:非线性(linear)和轴向(radial).
transform(切换)
透过css3切换,他们能终端,比率化,如此一来,转动和剪切原素.透过发生改变原素的特性来同时实现许多动画电影的效用.
animation(动画电影)
css3中他们能建立动画电影,它能取代许多网页动画电影影像,flash动画电影和JavaScripts.
二 css3(浏览器)前缀
css前缀用于区分并相容各大主流浏览器对于css新功能的支持.
例如,Safari和Chrome的前缀是-webkit.Chrome,Safari和Mozilla目前支持border-radius特性,只要带有浏览器前缀即可生效.
html代码:
<div class=”-webkit-border-radius”>阳光总在风雨后</div>
css代码:
div.-webkit-border-radius{border:1px solid green; padding:20px; margin:20px; -webkit-border-radius: 24px ; }
效用如下:
透过添加前缀,能使css样式在不受支持的浏览器中生效.有时候为了相容更多的浏览器,你可能需要对同两个样式特性进行重复定义增加不同的前缀.
每个浏览器对应的前缀如下::
firefox -moz-
safari -webkit-
chrome -webkit-
opera -o-
ie -ms-
● 为了使样式能够相容各种浏览器,前缀的写法可能较为重复,但这只是短暂的.随着浏览器的不断改进,会逐渐相容所有新样式.这样就能不需要采用前缀写法来相容了.
三 css3梯形
透过border-radius特性能给任何原素增设”梯形”
html代码:
<div class=”border-radius”>读书多了,容颜自然发生改变</div>
css代码:
div.border-radius{border-radius:20px;background-color:green;color:white; margin:20px; }
效用如下:
border-radius特性能透过(左上角,右上角,右下角,左下角)的顺序进行增设.
css代码:
border-radius:0 0 20px 30px;
效用如下:
border-radius的特性值也能是百分比.
●透过将原素的border-radius特性增设为原素高度和宽度的一半能将梯形增设变成圆形.
示例中矩形原素的宽度和高度均为200px.透过将border-radius增设为150px,矩形原素将变成圆形.
html代码:
<div class=”border-radius3″>横眉冷对千夫指,俯首甘为孺子牛</div>
css代码:
div.border-radius3{width:200px; height:200px; border-radius:100px; background-color:green; color:white; text-align: center; margin:30px;}
效用如下:
四 css3阴霾
box-shadow特性能我原素增加阴霾效用.
box-shadow特性采用时,必须按顺序增设
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必需,水平阴霾的位置.容许负值.
v-shadow:必需,垂直阴霾的位置.容许负值.
blur:可选,模糊不清距离.
spread:可选,阴霾的尺寸.
color:可选.阴霾的色调.
inset:可选,将外部阴霾(outset)改为内部阴霾.默认为outset.
html代码:
<div class=”box-shadow”>先天下之忧而忧后天下之乐而乐</div>
css代码:
div.box-shadow{width:300px; height:100px; background-color:#9ACD32; box-shadow:10px 10px #8888888; margin:30px; }
除了色调(color)外,box-shadow原素还有两个可选值,它们是模糊不清(blur)和扩展(spread)
负值也能用于box-shadow中:
h-shadow:阴霾将在框的左侧
v-shadow:阴霾将在框的上方.
blur:不予许采用负值
spread:负值会导致阴霾缩小.
