CSS+ div实现页面边框效果
问题：正如你现在看到的页面的右边的你的用户信息，他的外框是圆角的，请问用CSS+DIV怎么弄致谢：谢谢各位网友的回答...
问题：正如你现在看到的页面的右边的你的用户信息，他的外框是圆角的，请问用CSS+DIV怎么弄
致谢：谢谢各位网友的回答 展开
致谢：谢谢各位网友的回答 展开
展开全部
百度这个确实是css写出来的，代码如下：
----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>
----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以是有css
box-shadow添加边框阴影效果
border-style选择边框样式等实习边框效果
border-style的可选属性有如图供选择
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style="border:#000 solid 2px; width:1000px; height:300px; border-radius:30px"></div>
以上面代码为例：
border:#000 solid 2px
四个边框：颜色 实线 宽2pxl，这三个是边框的最基本元素，可以根据需求选取。
如需个别边框特别设置：
border-left:左边 border-right:右边 border-top:上边 border-bottom：下边
width:1000px; height:300px;
宽 和高
border-radius:30px
这个是边框圆角的整合代码，意思是四个边框的角30px的地方开始变成弧形，也可以拆分成
border-radius:0px 0px 20px 25px;
左上 右上 右下 左下 角的弧度数值
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius: 10px;
也可以写成这样的，具体数值根据自己的需求。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯CSS+DIV无法直接写，有JS可控制圆角，
通常的话你也就只能把圆角做成小图片进行拼接
通常的话你也就只能把圆角做成小图片进行拼接
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
