|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
破洛洛文章简介:如今CSS3已能够轻松完成跨扫瞄器的圆角效果,包含Firefox高版本,IE9,Safari,Chrome等高端扫瞄器。
W-教程博主就对照喜好圆角的盒子模子,如今CSS3已能够轻松完成跨扫瞄器的圆角效果,包含Firefox高版本,IE9,Safari,Chrome等高端扫瞄器。
我们如许往界说一个盒子模子:- -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
复制代码 在Firefox,和Chrome中的效果:
个中-moz-border-radius是Firefox完成圆角的公有属性,而-webkit-border-radius是webkit内核扫瞄器(如Safari和Chrome)完成圆角的公有属性。
我们也能够分离设置4个圆角的属性值,比方如许的款式:- -moz-border-radius-topleft:50px;-moz-border-radius-topright:10px;-moz-border-radius-bottomright:10px;-moz-border-radius-bottomleft:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:50px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;
复制代码 失掉的效果以下图:
我们还可使用CSS缩写款式完成圆角效果,比方上面的代码:- -moz-border-radius:50px30px20px10px;-webkit-border-radius:20px10px5px50px;
复制代码 固然我们也能够为盒子模子增加边框属性:
- -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:10pxsolid#69F;
复制代码 </p>
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。 |
|