圆角矩形的html+css实现代码

所属分类: HTML/Xhtml / 网页制作 阅读数: 1061
收藏 0 赞 0 分享
闲来无事,突然又想起了圆角矩形的实现。不过这个话题大家已经谈了太长时间了。各种各样的实现方案在网上都可以看到。这里仅仅是记录一下个人认为比较好的一个。这个方案不使用任何图片,是纯html+css实现。
css代码==================================

复制代码
代码如下:

<style type="text/css">
.spiffy{display:block }
.spiffy *{
display:block;
height:1px;
font-size:.01em;
overflow:hidden;
background:#b20000 }
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000 }
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000 }
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000; }
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000 }
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000 }
.spiffyfg{
background:#b20000 }
</style>

html代码=====================================

复制代码
代码如下:

<div style="background:#680000; padding:20px">
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div style="background:#b20000; height:100px; font-size:30pt; text-align:center;">
&bull;&bull;&bull;
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

有兴趣就试一下上面两段代码吧。
这个方案虽然比较不错,但是我还是想出了一个类似的但是更简洁的实现,呵呵,后面的文章会介绍。
更多精彩内容其他人还在看

浅析响应式框架中,table表头自动换行的快速解决方法

最近在用bootstrap开发网站,在处理一张table的时候发现,通过PC端查看样式正常,在手机上查看时,因为屏幕小,表格被压缩的厉害,表头和数据变形如下图后来网上找了一下,发现一个好用的CSS属性,加上就可以解决该问题   在此记录一下。以上这篇浅析响应式... 查看详情
收藏 0 赞 0 分享

几个老式播放器的嵌入代码

我们在网页上看到的播放器无外乎WMP/RealPlayer/Flash Player,其他的无非是面板不同,或者添加了其他控件,对于计算机上安装的一些播放器也都是编码和解码器的整合,其最核心的编码和解码技术是相同的。例如:网络上最流行的windows media流(asf,wma... 查看详情
收藏 0 赞 0 分享

深度剖析HTML的语意和与其相关的前端框架

关于语义语义研究的是标志与符号之间的关系,以及它们所代表的意义。在语言学中,它主要是研究这些标志(如单词,短语,或者声音)在语言中的意义。而在前端开发领域,语义主要涉及的是HTML元素、属性和属性值(包括像Microdata这样的扩展)所约定的意义。这些在规范中常用的正式约定语义... 查看详情
收藏 0 赞 0 分享

HTML表格布局实际使用详解

什么时候会用到表格现在,表格<table>一般不再用于网页整体的布局。不过,在面对某些特定的设计,如表单输入、数据呈现时,表格则可能是最恰当的选择。关于表格的直观印象,就是由多个单元格(cell)整齐排列而成的元素,可以明确看出行(row)和列(column)。这可以... 查看详情
收藏 0 赞 0 分享

详解HTML编程的标记与文档结构

    用HTML标记内容的目的是为了赋予网页语义(semantic)。换句话说,就是要给你的网页内容赋予某些用户代理(user agent)能够理解的含义。    HTML 规定了一组标签,用来给内容打上不同的标记。每... 查看详情
收藏 0 赞 0 分享

详解HTML的<input> 标签及其禁用方法

定义和用法<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。HTML 与 XHTML 之间的差异在 HTML 中,<input> 标签没有结束标... 查看详情
收藏 0 赞 0 分享

HTML中rel属性分析

由于发现有同学在微博转播和收藏这篇文章,所以回头来再审视下这篇随性翻译的文章,后来发现w3cschools.com.cn已经有了对照的中文译文,所以这里我就继续完善下这篇文章吧,让它显得更有价值点。最初想到翻译这篇文档源于http://vanessa.b3log.org/rese... 查看详情
收藏 0 赞 0 分享

详解HTML的style标签以及相关的CSS引用

 HTML style 标签style 标签 -- 在文档中声明样式时使用此标签style标签是成对出现的,以<style>开始,以</style>结束属性media -- 媒体类型,type -- 包含内容的类型,一般使用type="... 查看详情
收藏 0 赞 0 分享

HTML与XHTML、以及HTML4与HTML5标签之间的区别简介

HTML与XHTML区别1、XHTML元素必须被正确地嵌套2、XHTML 元素必须被关闭,空标签也必须被关闭。如<br/>3、XHTML 元素必须小写4、XHTML 文档必须拥有一个根元素5、XHTML属性名称必须小写,属性值必须加引号,属性不能简写。如:<in... 查看详情
收藏 0 赞 0 分享

Nofollow标签的写法以及nofollow使用介绍

“nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签,链接加上这个标签后就不会被计算权值,搜索引擎支持nofollow属性,在很大程度上抑制博客或论坛的垃圾留言。对站长来说是一件大好事。 nofollow是HTM... 查看详情
收藏 0 赞 0 分享
查看更多