仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 743|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS3教程(2):网页边框半径和网页圆角

[复制链接]
不帅 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:05:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
页面中圆角的完成是个很头疼的成绩,固然如今有良多种完成办法,可是都是对照贫苦的。在本文中,让我们看看怎样利用CSS3border-radius来完成圆角DIV。
跨扫瞄器兼容性

就像在上一篇《CSS3教程:甚么是CSS3》中提到的,并非一切的扫瞄器撑持CSS3,可是那些对照好的扫瞄器选择兼容,而不是间接撑持。我们有两个能利用的前缀。
前缀:
-moz(比方-moz-border-radius)用于Firefox
-webkit(比方:-webkit-border-radius)用于Safari和Chrome。
CSS3圆角(一切的)

不利用图片来完成圆角已经是很盛行的才能,创立那些完善的小圆角图片,用做得当的CSS背景,长短常费时的事情。如今,利用CSS3,我们能够用几行代码来创立圆角。

这是一个5px一般边框和15px边框半径的设置:
  1. #roundCorderC{font-family:Arial;border:5pxsolid#dedede;-moz-border-radius:15px;-webkit-border-radius:15px;padding:15px25px;height:inherit;width:590px;}
复制代码
扫瞄器撑持:


  • Firefox(3.05+…)
  • GoogleChrome(1.0.154+…)
  • GoogleChrome(2.0.156+…)
  • InternetExplorer(IE7,IE8)
  • Opera9.6
  • Safari(3.2.1+windows)
CSS3圆角(一般的)

固然,一个DIV的四个角不必要全体都是圆角,你能够一般的完成圆角。
  1. #roundCornerI{font-family:Arial;border:5pxsolid#dedede;-moz-border-radius-topleft:15px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:15px;-moz-border-radius-bottomleft:0px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-left-radius:0px;-webkit-border-bottom-right-radius:15px;padding:15x25px;height:inherit;width:590px;}
复制代码
扫瞄器撑持:


  • Firefox(3.05+…)
  • GoogleChrome(1.0.154+…)
  • GoogleChrome(2.0.156+…)
  • InternetExplorer(IE7,IE8)
  • Opera9.6
  • Safari(3.2.1+windows)

你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
老尸 该用户已被删除
沙发
发表于 2015-1-18 05:12:24 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。
透明 该用户已被删除
板凳
发表于 2015-1-24 15:31:02 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
活着的死人 该用户已被删除
地板
发表于 2015-2-2 06:03:30 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
蒙在股里 该用户已被删除
5#
发表于 2015-2-7 17:50:48 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
飘飘悠悠 该用户已被删除
6#
发表于 2015-2-22 22:37:28 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
兰色精灵 该用户已被删除
7#
发表于 2015-3-7 05:43:38 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
分手快乐 该用户已被删除
8#
发表于 2015-3-21 12:13:13 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 22:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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