css圆角的写法！

就是在网页中的四个角都是圆角的代码！

举报该文章

相关建议 2013-06-06

方法一：CSS3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-radius</title> </head> <body> <div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;">在Firefox和Safari 3的浏览器里能看到圆角效果</div> </body> </html> 方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/22v2sqp8p.html

其他看法

第1个回答 2013-06-06

兼容所有浏览器的圆角代码其实用图片代替最简单。DIV+CSS圆角：<style type="text/CSS">
div#nifty{margin:0;background:#9BD1FA}
p {padding:10px}
div.rtop {display:block;background:#fff}
div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}
div.r1{margin:0 5px}
div.r2{margin:0 3px}
div.r3{margin:0 2px}
div.rtop div.r4 {margin:0 1px;height:2px}
</style> <div id="nifty">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
<p>div + css 圆角矩形</p>
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>

第2个回答推荐于2018-05-10

CSS圆角的写法

border-radius:4px;

针对某一角设置为圆角

border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;

本回答被网友采纳

第3个回答 2013-06-06

还是CSS3 好啊，一个命令，搞定！

第4个回答 2013-06-06

如果有电脑我就写给你啦～手机没办法写给你！需要三个DIV！利用错位的感觉产生圆角

相似回答

大家正在搜