转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html
1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方法只适合当做菜单栏背景,或是相框背景,输入框的圆角不适合用,当然,这种方法对图片要求比较高!!如果你切图很好的话,这种方法可以用在一切圆角矩形上,缺点很明显,即使图片可以重复利用,也需要大量图片。
优点:图片可以自适应,技术简单,只做网站主页的话,图片就可以大量重复利用,效果相当不错。
==============================
2.
第二种方法!
简化第一种方法。将四个图片变成两个图片,上下各一个。
缺点:还是需要图片。而且自适应能力变差,左右不能自适应!!图片需求比较高,需要很好的切图技术!
优点:简化第一种方法,图片数量变小。技术简单,容易操作,更改时只需要换图片,效果就全换了!利用这种方法,建站后维护、更新很方便。
======================
3.
- 第三种方法!不用图片,纯css+div制作圆角矩形!!
而且对ie也支持!
原理是用8个高度、宽度很小的div块放在上下四角,并且这些div块相互并列,在最外面还有一个div块作为边框包含住这些小的div块,这些小的div块呈白色,其他背景、边框呈黑色,这样看起来矩形的四角就好像圆了。
这个方法非常实用,但是技术难度较高,需要对div+css较熟悉的人才能做到,在这里贴上代码!
-
代码:
<style>
#mid{ margin:0px 20px; background:#000; font-size:20px;}
div.rtop{ display:block; background:#fff;}
div.rtop div { display:block; height:1px; overflow:hidden; background:#000;}
div.r1{ margin:0 3px;}
div.r2{ margin:0 2px;}
div.r3{ margin:0 1px;}
div.rtop div.r4 { margin:0 1px; height:1px;}
</style>
</head>
<body>
<div id="mid">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
一些内容
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
<!-- 由8个div放在上上下四角做成的圆角矩形。注意div顺序!! -->
</div>
=============
- 第四种方法!效果十分好,只是对ie浏览器不兼容。也是纯css+div制作圆角矩形,不需要图片。
颜色渐变是谷歌的一个属性,Firefox也支持,但与圆角无关,就不再叙述。
原理:谷歌浏览器支持一种属性:-webkit-border-radius、-moz-border-radius。
比如bootstrap的输入框、按钮、导航菜单的圆角效果,都是这样做成的!
-
代码如下:
<style type=‘text/css‘>
div{
text-align: center;
font-size: 32px;
width: 500px;
color: white;
padding: 10px;
margin: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<body>
<div>
一些内容
</div>
</body>
}
-
最后再次来看看效果图吧!!