如何用CSS实现圆角框?
2个回答
展开全部
纯CSS做的...
复制代码保存为网页文件即可...
圆角外是透明的,不受下层背景色影响
给你做了有边框和无边框的两个算法,
好好研究下就明白...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角</title>
<style type="text/css">
.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;}
复制代码保存为网页文件即可...
圆角外是透明的,不受下层背景色影响
给你做了有边框和无边框的两个算法,
好好研究下就明白...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角</title>
<style type="text/css">
.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;}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
