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 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 文件操作实现代码
2009/10/07 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
旷课检讨书2000字
2014/01/14 职场文书
七年级政治教学反思
2014/02/03 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
优秀班组申报材料
2014/12/25 职场文书
搞笑婚前保证书
2015/02/28 职场文书
民主生活会意见
2015/06/05 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技