找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2558|回复: 1

[教程] 你需要熟知10个的CSS3属性(一)

[复制链接]
发表于 2012-1-14 23:53:25 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京
新的CSS3又有哪些新属性呢?虽然大多数需要特定的前缀,但你仍然可以在你的项目中使用它,其实上我也鼓励大家这么做。关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定。但是要永远记住,网站设计不必看到所有浏览器的不同。在文章的最后,我们将显示一个有趣的最终的案例。
1、border-radius
演示
border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。
我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。
  1. -webkit-border-radius: 4px;
  2. -moz-border-radius: 4px;
  3. border-radius: 4px;
复制代码

注意:请在Safari 5 和 IE9、火狐浏览器中执行”border-radius”语法。

许多读者也许不会意识到我们可以用这个属性来做一个圆。
  1. -moz-border-radius: 50px;
  2. -webkit-border-radius: 50px;
  3. border-radius: 50px;
复制代码
演示
如果想再添加点效果,我们可以利用Flexible Box Model(详情在8中)来使得文字在垂直在水平方向都居中。这需要加点代码,但这仅仅是对不同浏览器的补偿。
  1. display: -moz-box;
  2. display: -webkit-box;
  3. display: box;
  4. -moz-box-orient: horizontal;
  5. /* the default, so not really necessary here */
  6. -webkit-box-orient: horizontal;
  7. box-orient: horizontal;
  8. -moz-box-pack: center;
  9. -moz-box-align: center;
  10. -webkit-box-pack: center;
  11. -webkit-box-align: center;
  12. box-pack: center;
  13. box-align: center;
复制代码

评分

参与人数 1金币 +10 收起 理由
光明使者 + 10 很给力!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

 楼主| 发表于 2012-1-14 23:55:39 | 显示全部楼层 来自 中国–江苏–南京
显示不了圆,最简单的是用火狐看,或者ie9,或者mac自带的Safari 来看,这个是趋势啦,嘿嘿

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 09:14 , Processed in 0.047154 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表