css3边框(border)模型x

css3边框(border)模型x

ID:39963092

大小:1.19 MB

页数:8页

时间:2019-07-16

css3边框(border)模型x_第1页
css3边框(border)模型x_第2页
css3边框(border)模型x_第3页
css3边框(border)模型x_第4页
css3边框(border)模型x_第5页
资源描述:

《css3边框(border)模型x》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CSS3边框(border)模型css3因为css3并不是所有的浏览器都支持,有些浏览器虽然支持,但是效果也不是很好,所以这些浏览器在支持这些新特性的时候,给这些属性加入自己的厂名,等到css3标准化后再将厂名去掉,比方说:对于圆角的支持:.box_round{-moz-border-radius:30px;/*FF1+*/-o-border-radius:30px;/*opera*/-webkit-border-radius:30px;/*Saf3+,Chrome*/border-radi

2、us:30px;/*Opera10.5,IE9*/}CSS3边框通过CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-不再需使用设计软件,比如PhotoShop,来做这些效果,能够很轻松的在页面当中做出圆角,阴影等效果CSS3边框浏览器支持情况属性浏览器支持border-radiusInternetFirefoxChromeSafariExplorer9+box-shadowInternetFirefoxChromeSafariExplorer9+border-imageFirefoxCh

3、romeSafari属性border-radiusCSS3边框box_round{-moz-border-radius:30px;/*FF1+*/-o-border-radius:30px;/*opera*/-webkit-border-radius:30px;/*Saf3+,Chrome*/border-radius:30px;/*Opera10.5,IE9*/}注释:按此顺序设置每个radius的四个值。如果省略bottom-left,则与top-right相同。如果省略bottom-right,则

4、与top-left相同。如果省略top-right,则与top-left相同。值描述length定义圆角的半径%以百分比定义圆角的形状。属性box-shadowCSS3边框.box_shadow{-moz-box-shadow:3px3px4px#ffffff;/*FF3.5+*/-webkit-box-shadow:3px3px4px#ffffff;/*Saf3.0+,Chrome*/box-shadow:3px3px4px#ffffff;/*Opera10.5,IE9.0*/-ms-filter:"

5、progid:DXImageTransform.Microsoft.dropshadow(OffX=3px,OffY=3px,Color='#ffffff')";/*IE8*/}-moz-box-shadow、-webkit-box-shadow和box-shadow的设置是一样的,都有4个参数,含义分别为:x轴偏移值、y轴偏移值、阴影的模糊度、以及阴影颜色。IE6~8使用其独有的滤镜,需要设置三个参数:offX(X轴偏移值)、offY(Y轴偏移值)、Color(阴影颜色)。属性border-image

6、CSS3边框div{-webkit-border-image:url(border.png)3030round;/*Safari5*/-o-border-image:url(border.png)3030round;/*Opera*/border-image:url(border.png)3030round;/*Opera*/}浏览器支持Firefox、Chrome以及Safari6支持border-image属性。Opera支持替代的-o-border-image属性。Safari5支持替代的-web

7、kit-border-image属性。属性border-imageCSS3边框值描述border-image-source用在边框的图片的路径。border-image-slice图片边框向内偏移。border-image-width图片边框的宽度。border-image-outset边框图像区域超出边框的量。border-image-repeat图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。