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

为什么80%的码农都做不了架构师？>>>

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

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

FF 的圆角

Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chrome 的效果了)

IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器“对号入座”，就达到了“兼容”的效果。

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

XML/HTML Code

<div class="box1">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圆角一</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>

CSS 代码：

JavaScript Code

.box1 {
background:url(images/bg1.gif) repeat-x #1d6cb7;
margin-top:1em;
position:relative;
zoom:1;
width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
width:5px;
height:5px;
position:absolute;
background:url(images/bg3.gif) no-repeat;
overflow:hidden;
}
.box1 .cc {
height:40px;
padding:5px;
}
.box1 .tl {
left:0;
top:0;
}
.box1 .tr {
right:0;
top:0;
background-position:0 -5px;
}
.box1 .bl {
left:0;
bottom:0;
background-position:0 -10px;
}
.box1 .br {
right:0;
bottom:0;
background-position:0 -15px;
}

转载于:https://my.oschina.net/sirui/blog/525911

CSS3绘制圆角矩形的简单示例相关推荐

html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
这篇文章主要介绍了使用CSS3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少...well,需要的朋友可以参考下纯HTML+CSS实现阿童木头像先上最终效果图: 在里面主要用的 ...
GDI+绘制圆角矩形
1.最近,用到GDI+绘图,但是发现没有绘制圆角矩形的函数,故自己写了一个.下面贴出原理和代码,以作备份. 2.要绘制圆角矩形,基础是普通的直角矩形,需要做的就是将直角画成弧形. 3.绘制圆角矩形可以 ...
php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
android绘制圆角矩形
android中可以绘制圆角矩形. 1.利用画布cavas绘制如果提供了一个方法可以在画布上绘制圆角矩形: 函数名称:public void drawRoundRect (RectF rect, f ...
绘制圆角矩形（方法）
/* sharecodes.org 友情提醒:尊重知识,转载请注明原创作者.出处! */ /// <summary> /// C# GDI+ 绘制圆角矩形 /// </summary ...
JavaScript 使用canvas绘制圆角矩形边框
目录分析完整代码如下前言在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析 Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实 ...
微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
canvas绘图，绘制圆角矩形。圆角线条。圆形头像
//绘制圆角矩形 //x.x坐标,y,y轴坐标.width宽 height高 radius圆角(一定不能大于height的一半,否则不显示) fillColor填充颜色.borderColor线 ...
咸鱼菌CAD实战—绘制圆角矩形
咸鱼菌CAD实战-绘制圆角矩形设计中一般使用圆角使产品看起来更舒服一些,今天我们来绘制一个圆角矩形. 方法如下: 绘制矩形使用快捷键F,进入倒圆角工具.或者在工具栏中选择倒圆角工具按R键进入半径 ...

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

CSS3绘制圆角矩形的简单示例相关推荐

最新文章

热门文章