找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1695|回复: 0

[教程] CSS3 试试看

[复制链接]
发表于 2013-3-25 10:03:59 | 显示全部楼层 |阅读模式 来自 中国–广东–湛江
无意中看到CSS3的强大功能,比较感兴趣,分享下先。。。呵呵
  首先你得安装IE9,,,,
  如果你没安装IE9 beata,来这里试试。。。
  http://windows.microsoft.com/en- ... load/ie-9/worldwide
  选择语言和版本,

  或者是FireFox3.1版本以上,Opera9.5版本以上。(我只是在IE9下面测试)。
  1. border-radius属性:
  很好看的形状不再需要image来实现啦。。我们看看如何让一个DIV显示为不规则。并在里面存放一些文本。使用CSS3中的border-radius属性:
  •    1. div       2.             {       3.                 border: solid black;       4.                 border-radius: 40px;       5.                 height: 1in;       6.                 width: 2in;       7.                 overflow: hidden;       8.             }

复制代码

  div显示:

  2.background-clip属性:
  background=clip结合border-radius使用,可以设计出不错的形状。
Css:

  两个div的显示:

  3. border-x-x-radius属性
  x代表top,right,left,bottom,想让哪边有圆角就可以把x设置为哪边,例如top-right就是右上角,top-left就是左上角,。。。。。,另外后面还可以添加百分比来设置圆角的显示弧度。
  CSS:

  效果:

  4.background-clip+父子结构的div使用
  CSS+Html:

  效果:

  5.圆角文本输入框
  Css+Html:

  效果:

  6、CSS3使用border属性画圆画方:

  Css+Html:

  确实很强大,以后很多的图片都可以用CSS来取代了。。。。。。而且不需要为了一个圆角写那么多CSS和js了。

评分

参与人数 1金币 +10 收起 理由
猫性男孩 + 10 部分ie用户还是不好解决

查看全部评分

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

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

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

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

关闭

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

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

GMT+8, 2024-11-26 03:06 , Processed in 0.291061 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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