div+css用边框实现圆角矩形(多样式)

2024-07-11 08:37:35

字体：大中小

来源：转载

供稿：网友

简洁型css圆角：

方法1：

.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}.b1,.b1b{margin:0 5px;background:#999;}.b2,.b2b{margin:0 3px;border-width:2px;}.b3,.b3b{margin:0 2px;}.b4,.b4b{height:2px;margin:0 1px;}.d1{background:#F7F8F9;}.k {height:150px;}

简洁型css圆角矩形

code1:

复制代码代码如下:
<style type=”text/css”>
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{}{margin:0 5px;background:#999;}
.b2,.b2b{}{margin:0 3px;border-width:2px;}
.b3,.b3b{}{margin:0 2px;}
.b4,.b4b{}{height:2px;margin:0 1px;}
.d1{}{background:#F7F8F9;}
.k {}{height:300px;}
</style>
</head>
<body>
<div>
<b class=”b1″></b><b class=”b2 d1″></b><b class=”b3 d1″></b><b class=”b4 d1″></b>
<div class=”b d1 k”>
<font style=”font-size:26px;color:red; margin:0px 10px;”>简洁型css圆角矩形</font>
</div>
<b class=”b4b d1″></b><b class=”b3b d1″></b><b class=”b2b d1″></b><b class=”b1b”></b>
</div>

方法2：

div.RoundedCorner{background: #9BD1FA; width:400px; margin-left:20px;}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}b.r1{margin: 0 5px}b.r2{margin: 0 3px}b.r3{margin: 0 2px}b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

无图片实现圆角框

code2:

复制代码代码如下:
<style type=”text/css”>
div.RoundedCorner{}{background:#9BD1FA; width:400px;}
b.rtop, b.rbottom{}{display:block;background: #FFF}
b.rtop b, b.rbottom b{}{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{}{margin: 0 5px}
b.r2{}{margin: 0 3px}
b.r3{}{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{}{margin: 0 1px;height: 2px}
</style>

上一篇：CSS兼容问题之HACK技术

下一篇：表格边框以虚线显示的css样式

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注