简写CSS圆角

首页 → 解决方案 → 基础语法 → HTML前端 → 简写CSS圆角

分享到：

dsfsdf

时间: 2011-03-17 16:03 阅读(297) 评论(0)

网页上有很多的圆角，本节向大家介绍一下DIV+CSS圆角的简单实现方法，即使用图片做背景的DIV+CSS圆角实现方案。一张图片利用CSS定位，实现DIV的四个边角都是圆角,
以下为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 #007FBA;border-right:1px solid #007FBA;}

.b1,.b1b{margin:0 5px;background:#007FBA;}

.b2,.b2b{margin:0 3px;border-width:2px;}

.b3,.b3b{margin:0 2px;}

.b4,.b4b{height:2px;margin:0 1px;}

.d1{background:#041D30;}

以下为HTML代码：

<div>

<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>

<div class="b d1">

<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>

相关解决方案
• DIV+CSS圆角边框
(377次浏览)
2011-03-17
• 再谈CSS圆角
(233次浏览)
2011-03-17
• DIV+CSS圆角的简单实现方法（图）
(270次浏览)
2011-03-17
• 简写CSS圆角
(297次浏览)
2011-03-17
• 这段css圆角代码如何理解
(263次浏览)
2011-03-17
• IE6 img png透明bug的解决办法
(479次浏览)
2011-03-21
• CSS关于align="absmiddle"成员名称说明
(412次浏览)
2011-03-28
• Sitemap 的 XML 格式详细介绍
(203次浏览)
2011-03-29

网友评论：共有0条评论

我来评论

小提示：: • 运行html请点击源码添加; • 添加完毕后加上<br />; • 显示html直接复制黏贴; • 高亮代码请点击插入代码

小贴士：

1. 请各位网友在回复的时候不为了回复而回复，尽量发一些有质量的回复内容。

2. 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。

3. 请勿到处挖坑绊人、招贴广告。即占空间让人厌烦,又没人会搭理,于人于己都无利。如果您发现自己的回复不见了,请参考以上3条。

简写CSS圆角

相关解决方案