仓酷云

标题: 来一发CSS3教程(2):网页边框半径和网页圆角 [打印本页]
作者: 不帅    时间: 2015-1-16 00:05
标题: 来一发CSS3教程(2):网页边框半径和网页圆角
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
页面中圆角的完成是个很头疼的成绩，固然如今有良多种完成办法，可是都是对照贫苦的。在本文中，让我们看看怎样利用CSS3border-radius来完成圆角DIV。
跨扫瞄器兼容性

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

不利用图片来完成圆角已经是很盛行的才能，创立那些完善的小圆角图片，用做得当的CSS背景，长短常费时的事情。如今，利用CSS3，我们能够用几行代码来创立圆角。
来一发CSS3教程(2):网页边框半径和网页圆角
登录/注册后可看大图

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

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;}
复制代码
扫瞄器撑持:


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



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2