CSS3绘制圆角矩形的简单示例


Posted in HTML / CSS onSeptember 28, 2015

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。

对于一些浏览器,它们有其私有的圆角属性。如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius 。效果见下图:

FF 的圆角
CSS3绘制圆角矩形的简单示例
Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核,这里就只附 Chrome 的效果了)
CSS3绘制圆角矩形的简单示例
IE 和 Opera 就没有私有的圆角属性了,如果有的话,那制作圆角应该就简单多了,把各自的私有属性全部写上,让各个浏览器“对号入座”,就达到了“兼容”的效果。

下面给出一个百度有啊CSS圆角方案的示例:

XML/HTML Code复制内容到剪贴板
  1. <div class="box1">  
  2.     <span class="tl"></span><span class="tr"></span>  
  3.     <div class="cc">  
  4.         <p>圆角一</p>  
  5.     </div>  
  6.     <span class="bl"></span><span class="br"></span>  
  7. </div>  

CSS 代码:

JavaScript Code复制内容到剪贴板
  1. .box1 {   
  2.  background:url(images/bg1.gif) repeat-x #1d6cb7;   
  3.  margin-top:1em;   
  4.  position:relative;   
  5.  zoom:1;   
  6.  width:778px;   
  7. }   
  8. .box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {   
  9.  width:5px;   
  10.  height:5px;   
  11.  position:absolute;   
  12.  background:url(images/bg3.gif) no-repeat;   
  13.  overflow:hidden;   
  14. }   
  15. .box1 .cc {   
  16.  height:40px;   
  17.  padding:5px;   
  18. }   
  19. .box1 .tl {   
  20.  left:0;   
  21.  top:0;   
  22. }   
  23. .box1 .tr {   
  24.  right:0;   
  25.  top:0;   
  26.  background-position:0 -5px;   
  27. }   
  28. .box1 .bl {   
  29.  left:0;   
  30.  bottom:0;   
  31.  background-position:0 -10px;   
  32. }   
  33. .box1 .br {   
  34.  right:0;   
  35.  bottom:0;   
  36.  background-position:0 -15px;   
  37. }  
HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 HTML / CSS
CSS3的resize属性使用初探
Sep 27 #HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 #HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 #HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 #HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 #HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 #HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 #HTML / CSS
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP可变函数的使用详解
2013/06/14 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php 数据结构之链表队列
2017/10/17 PHP
浅谈JavaScript字符集
2014/05/22 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
安装Python的教程-Windows
2017/07/22 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python字符串Intern机制详解
2019/07/01 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
文秘自荐信
2013/10/20 职场文书
会计专业导师推荐信
2014/03/08 职场文书
小学毕业寄语大全
2014/04/03 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
勤俭节约倡议书
2014/04/14 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
婚前协议书范本
2014/10/27 职场文书
文案策划岗位职责
2015/02/11 职场文书
工作犯错保证书
2015/05/11 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers