css3新特性Word文件下载.docx
- 文档编号:16567631
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:9
- 大小:46.71KB
css3新特性Word文件下载.docx
《css3新特性Word文件下载.docx》由会员分享,可在线阅读,更多相关《css3新特性Word文件下载.docx(9页珍藏版)》请在冰豆网上搜索。
border-radius:
能产生雷同圆角矩形的效果
背景(Backgrounds)
credentials-origin:
决定了背景在盒模型中的初始位置,听说css3阴影。
提供了3个值,border;
pentering和contentborder:
控制背景起始于左上角的边框
pentering:
控制背景起始于左上角的留白
content:
控制背景起始于左上角的形式
credentials-clip:
决定边框能否笼罩住背景(默许是不笼罩),提供了两个值,border和penteringborder:
会笼罩住背景
不会笼罩背景
credentials-size:
可以指定背景大小,以象素或百分比呈现。
当指定为百分比时,大小会由所在区域的宽度、高度,以及credentials-origin的位置决定
multiplecredentialss:
多重背景图象,可以把不同背景图象只放到一个块元素里。
你知道divcss教程html。
文字效果:
(Texteffects)
text-shadow:
文字投影,可能是由于MACOSX的Safari阅读器开始支持投影才特意增加的。
text-overflow:
当文字溢出时,用“…”提示。
包括ellipsis、clip、ellipsis-word、inherit,前两个CSS2就有了,目前还是部分支持,但有趣的是IE6竟然也支持。
ellipsis-word可以省略掉最后一个单词,对中文意义不大,inherit可以继承父级元素。
色彩:
(Color)
HSLcolors:
除了支持RGB眼色外,还支持HSL(色相、饱和度、亮度)。
以前寻常都是作图的时期用HSL色谱,但这样一来会包括更多的色彩。
H用度表示,S和L用百分比表示,比如hsl(0;
100%;
50%)HSLAcolors:
加了个不透亮度(Apacity),用0到1之间的数来表示,比如hsla(0;
50%;
0.2)
opacity:
直接控制不透亮度,用0到1之间的数来表示
RGBAcolors:
和HSLAcolors雷同,加了个不透亮度
用户界面(User-interface)
resize:
可以由用户本身调整div的大小,有horizontal(水平)vertical(垂直)或者androidh(同时),或者同时调整。
如果再加上max-width或min-width的话还可以防御破坏布局
选择器:
(Selectors)
Attributnonetheless;
eselectors:
在属性中可以加入通配符,包括^;
$;
*
[att^=val]:
表示开始字符是val的att属性
[att$=val]:
表示结束字符是val的att属性
[att*=val]:
表示包罗至少有一个val的att属性
其它模块:
(Othermodules)
mediaqueries:
感觉叫媒体选择对照合适,可以为网页中不同的对象设置不同的阅读配置。
比如可以为某一块区分设置屏幕阅读样式和手机阅读样式,以前则只能设置整个网页。
multi-columnlayout:
多列布局,让文字以多列呈现,包括column-width、column-count、column-gap三个值
column-width:
指定每列宽度
column-count:
指定列数
column-gap:
指定每列之间的间距
column-rule-color:
控制列间的色彩
column-rule-style:
控制列间的样式
column-rule-width:
控制列间的宽度
column-space-distributnonetheless;
ion:
均匀分配列间距
5、CSS3兼容
但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。
以下就是这些写法的详细介绍。
所有代码都经过了Firefox3.6和IE8.0的验证。
A圆角(RoundedCorner)
.box_round{
-moz-border-radius:
30px;
-webkit-border-radius:
}
圆角的实现比较简单,只要设好一个半径值就可以了。
遗憾的是,目前所有的IE都不支持CSS圆角,要等到IE9才行。
B盒状阴影(BoxShadow)
.box_shadow{
-moz-box-shadow:
3px3px4px#ffffff;
-webkit-box-shadow:
box-shadow:
filter:
progid:
DXImageTransform.Microsoft.dropshadow(OffX=3px,OffY=3px,Color=’#ffffff’);
-ms-filter:
“progid:
DXImageTransform.Microsoft.dropshadow(OffX=3px,OffY=3px,Color=’#ffffff’)”;
-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:
x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。
IE6~8使用其独有的滤镜,需要设置三个参数:
offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。
C线性渐变(Gradient)
.box_gradient{
background-image:
-moz-linear-gradient(top,#444444,#999999);
-webkit-gradient(linear,lefttop,leftbottom,color-stop(0,#444444),color-stop(1,#999999));
DXImageTransform.Microsoft.gradient(startColorstr=’#444444′,endColorstr=’#999999′,GradientType=’0′);
DXImageTransform.Microsoft.gradient(startColorstr=’#444444′,endColorstr=’#999999′,GradientType=’0′)”;
先看Firefox。
-moz-linear-gradient(top,#444444,#999999);
-moz-linear-gradient有三个参数。
第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成lefttop,那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。
你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
-webkit-gradient(linear,lefttop,leftbottom,color-stop(0,#444444),color-stop(1,#999999));
-webkit-gradient是webkit引擎对渐变的实现,一共有五个参数。
第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(辐射渐变)。
第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。
这对值可以用坐标形式表示,也可以用关键值表示,比如lefttop(左上角)和leftbottom(左下角)。
第四个和第五个参数,分别是两个color-stop函数。
color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;
第二个表示该点的颜色。
IE依靠滤镜实现渐变。
startColorstr表示起点的颜色,endColorstr表示终点颜色。
GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。
D透明(opacity)
正常情况下,上层的对象会覆盖下层的对象。
但是,如果将上层对象的颜色变为透明,就可以透过它看到下层对象。
.box_rgba{
background-color:
#B4B490;
background:
transparent;
DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′);
DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′)”;
zoom:
1;
rgba(180,180,144,0.6);
先看第一行。
这是设置对象的预备色,也就是不透明时的颜色。
如果浏览器不支持透明,就将显示这个颜色。
这几行是专门为IE写的,其中主要用到DXImageTransform.Microsoft.gradient滤镜。
我们要为它设置起点色(startColorstr)和终点色(endColorstr)。
在单色透明的情况下,这两个值是相同的。
需要注意的是,它们的取值是一个八位的十六进制值,前两位表示alpha通道值,00表示完全透明,FF表示完全不透明;
后六位则是这个颜色的RGB值。
除了IE,其他浏览器几乎都支持rgba函数。
它有四个参数,前三个为一种颜色的RGB值,第四个为透明度,这里设为0.6。
E旋转(rotation)
.box_rotate{
-moz-transform:
rotate(7.5deg);
-o-transform:
-webkit-transform:
DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’autoexpand’);
DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’autoexpand’)”;
除了IE以外,其他浏览器都是用rotate函数,实现某个对象的旋转。
比如rotate(7.5deg)就表示顺时针旋转7.5度(degree)。
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。
它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11=cos(rotation),M12=-sin(rotation),M21=sin(rotation),M22=cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;
第五个参数SizingMethod表示重绘方式,’autoexpand’代表自动扩展到新的边界。
除了这个滤镜,IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。
其中的x只能取值为1,2,3,0,分别表示顺时针选择90度、180度、270度和360度。
F服务器端字体(font-face)
设计网页的时候,可能会用到某种特殊的字体。
如果用户的机器中没有安装,文字只能以普通字体显示。
这时可以让用户的浏览器自行下载服务器端字体,然后就能呈现出设计者想要的效果。
@font-face{
font-family:
‘MyFont’;
src:
url(‘myfont.eot’);
local(‘myfont.ttf’),
url(‘myfont.woff’)format(‘woff’),
url(‘myfont.ttf’)format(‘truetype’);
第一行代码:
表示为这种字体起一个名称,可以随意设置,我这里用的是MyFont。
这一行表示字体位置,由于ie只支持服务器端的eot字体,所以这一行是ie专用的。
local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。
url()表示字体在服务器上的位置,format()用来说明字体格式。
Firefox3.5支持TrueType和OpenType字体,Firefox3.6又增加了WOFF字体。
其他基于Webkit引擎的浏览器(sarif,opera、chrome),目前好像只支持truetype。
然后,使用的时候这样写就可以了。
h2{font-family:
“MyFont”;
}
需要注意的是,字体文件必须与网页文件来自同一个域名,符合浏览器的“同源政策”。
另外,由于中文字体文件太大,服务器端字体显然只适用于英文字体。
G其他
利用css3,还可以完成transform(变形),包括skew(扭曲)和scale(缩放),以及csstransitions(动态变换)。
这些内容待以后再补充。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css3 特性