利用CSS实现圆角框的方法解析_css教程

利用CSS实现圆角框的方法解析: 发布时间：2019-12-16编辑：脚本学堂

纯CSS(不用图片)来实现圆角框，宽度和高度能自适应的方法很少见，大家一定好好看看。

精彩推荐：

下面请看纯CSS做的例子：
圆角外是透明的，不受下层背景色影响做了有边框和无边框的两种效果。

复制代码代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

<head>

<title>CSS圆角</title>

.round { width:200px; left:100px; top:100px; position:absolute; background:none; overflow:none;}

.round_conner{ background:none; overflow:none;}

.round_body{ height:190px; background:#abc ; overflow:none;}

.round_body_contain { padding:10px;}

.l1,.l2,.l3,.l4{ font-size:0; height:1px; overflow:none; width:auto; background:#abc;clear:both;}

.l1 {margin:0 5px;}

.l2 {margin:0 3px;}

.l3 {margin:0 2px;}

.l4 {margin:0 1px;}

/*用这段样式圆角是有边框的

.round { width:200px; height:200px; left:100px; top:100px; position:relative; background:none; overflow:none;}

.round_conner{ background:none; overflow:none;}

.round_body{ height:190px; background:#abc ; overflow:none; border-left:1px #000 solid; border-right:1px #000 solid;}

.round_body_contain { padding:10px;}

.l1,.l2,.l3,.l4{ font-size:0; height:1px; overflow:none; width:auto; background:#abc; clear:both; border-left:1px #000 solid; border-right:1px #000
solid;}

.l1 {margin:0 5px; background:#000; border:none;}

.l2 {margin:0 3px; border-left:2px #000 solid; border-right:2px #000 solid;}

.l3 {margin:0 2px;}

.l4 {margin:0 1px;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

内容在这里边....<br/>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

.round的width必须设的

.round_body的height推荐也设上,

.round_body[height]+10 = .round[height]

另附:FF,Safari和Chrome 可分别用以下属性来设置圆角(CSS 3.0)

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

上一篇：CSS绘制三角形与箭头的实用例子
下一篇：CSS实现文字变图象特效的方法

与利用CSS实现圆角框的方法解析有关的文章

本文标题：利用CSS实现圆角框的方法解析
本页链接：http://www.jb200.com/article/10795.html

浏览排行

栏目分类

热点文章

利用CSS实现圆角框的方法解析