CSS样式怎么实现圆角矩形功能？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式怎么实现圆角矩形功能？相关的知识，希望对你有一定的参考价值。
用border-radius属性来实现圆角功能
border-radius使用案例
<!doctype html><html>
<head>
<meta charset='UTF-8' />
<title>圆角功能</title>
<style type="text/css">
#div1
border:1px solid #f00;
width:200px;
height:100px;
border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->;
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html> 参考技术A 可以，不过在IE核心里只有CSS3.0才能实现，不过像FIREFOX就OK：写法是这样的。-moz-border-radius:5px 4px 3px 2px;后面那四个值分别人：左上，右上，右下，左下。 参考技术B 做个圆角图片，设成背景就好了。 参考技术C 反恐精英起源没有该功能 参考技术D 如果你是用CSS3.0的话，就看楼上如果是CSS2.2的话，我可以简单写一个制作圆角矩形，分上中下裁成三张图<title>CSS3实现圆角</title>
<style type="text/css">
#box
width:200px;
height:30px;
background:url("../images/bt_bottom.jpg") no-repeat left bottom;
#box h1
width:200px;
height:20px;
text-indent:-9999px;
background:url("../images/bt_top.jpg") no-repeat left top;
/*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/
#box div#content
width:200px;
height:200px;
background:url("../images/bt_bg.jpg") repeat-y;
</style>
</head>
<body>
<div id="box">
<h1>标题</h1>
<div id="content"></div>
</div>
</body>
</html>我也是初学者，可能不是太全面，希望您能看懂~~
如何样用css做出圆角矩形
貌似只有CSS3才能够实现圆角矩形吧。你可以在css中分成3段，前后两段用图片做背景成为圆角，中间用矩形。 参考技术A CSS3的border-radius可以圆角化以上是关于CSS样式怎么实现圆角矩形功能？的主要内容，如果未能解决你的问题，请参考以下文章