css实现有边框圆角效果

最新推荐文章于 2023-07-24 10:06:15 发布

iteye_8292

最新推荐文章于 2023-07-24 10:06:15 发布

阅读量167

点赞数

分类专栏： HTML/CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/iteye_8292/article/details/81890000

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>CSS圆角</title>
<style type="text/css">

//用这段样式圆角是有边框的
.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 class="round_body" >
<div class="round_body_contain">
  我是有边框圆角....<br/>
  我是有边框圆角....<br/>
  我是有边框圆角....<br/>
</div>
</div>

</div>

</body>
</html>

iteye_8292

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现有边框圆角效果

&lt;html&gt;&lt;head&gt;&lt;title&gt;CSS圆角&lt;/title&gt;&lt;style type="text/css"&gt;//用这段样式圆角是有边框的.round{ width:200px; height:200px; left:100px; top:100px; position:relative; background:none; ...
复制链接

扫一扫