css实现简单圆角效果
作者:天驱 来源:Alipay UED 发布时间:2008-11-27 13:11:00
标签:圆角,自适应,css
目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果。对于前端开发工程师来说,圆角的确是一个让人又爱又恨的东西,一方面顾及设计师追求的美观效果,另一方面又不得不增添很多工作投入。无意中看到别人写的一个用纯粹css来实现的圆角效果,研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法。总结了一下,可以实现自适应的纯css圆角效果。
首先,我们看一下一般圆角的结构:
从下图可以明显看出圆角和直边的关系,其实把圆角放大之后可以看到圆角是由像素化的直边组成的:
于是就有了css实现圆角的思路,就是通过用1px 的水平线条来堆叠出圆角,其中border和background的颜色填充来实现圆角边框,同时设置不同的左右margin数值(以1px为基数)来实现错位,从而整体上实现了简单的圆角效果。
下面介绍一下代码:
html部分(思路是“头部+内容+底部”):
<div>
<b class="round">
<b class="round1"></b>
<b class="round2"></b>
<b class="round3"></b>
<b class="round4"></b>
<b class="round5"></b>
</b>
<div class="roundContent">
<!-- 显示内容区域 -->
我是内容 <br />
我是内容 <br />
我是内容 <br />
我是内容 <br />
</div>
<b class="round">
<b class="round5"></b>
<b class="round4"></b>
<b class="round3"></b>
<b class="round2"></b>
<b class="round1"></b>
</b>
</div>
通过<B>标签来模组建dom结构,上中下三部分拼合形成一个圆角整体。
css样式部分(主要是border颜色和margin数值):
<style type="text/css">
.round{display:block}
.round *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#e7ff94;
}
.round1{
margin:0 4px;
border:1px solid #ff2000;
background:#ff2000;/*头尾边框色*/
}
.round2{
margin:0 3px;
border:1px solid #ff2000;
}
.round3{
margin:0 2px;
border:1px solid #ff2000;}
.round4{
margin:0 1px;
border:1px solid #ff2000;}
.round5{
margin:0 1px;
border:1px solid #ff2000;
}
.round1,.round2,.round3,.round4,.round5{
border-top:none;
border-bottom:none;
}
.roundContent{
border-left:1px solid #ff2000;
border-right:1px solid #ff2000;/*左右边框色*/
background:#e7ff94;
padding:10px;
}
</style>
很容易看出这不是真正的圆角,没有很好的过渡效果,只是一定程度上模拟了圆角的实现原理。对于那些要求效果比较高的圆角和设计比较复杂的圆角来说不是很适用。
具体的效果如下:
demo文件在这里:点击查看
0
投稿
猜你喜欢
- 大家都知道索引对于数据访问的性能有非常关键的作用,都知道索引可以提高数据访问效率。为什么索引能提高数据访问性能?他会不会有“副作用”?是不是
- 无论使用int还是varchar,对于Status的多选查询都是不易应对的。举例,常规思维下对CustomerStatus的Enum设置如下
- 今日一同时问我,new Date(Date(str))这段代码什么意思?我一看就晕了,一个new Date 一个Date这是什么意思?这函数
- body {font-family: Arial, sans-serif; }这是我迄今
- 相关的题外话:一、操作系统window系统内部都是unicode的。文件夹名,文件名等都是unicode的,任何语言系统下都能正常显示。二、
- QQ医生在广大用户心中一直以来都是清爽便捷的一款安全工具,随着QQ医生的不断发展,QQ医生团队一直在思考,怎样能够给QQ医生用户带来性能更优
- 使用T_SQL创建数据库 TestSchool 创建一个学生表 TblStudent 创建学生成绩表 TblScore q tScoreId
- 作为一个MySQL的系统管理员,你有责任维护你的MySQL数据库系统的数据安全性和完整性。本文主要主要介绍如何建立一个安全的MySQL系统,
- 引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块
- 在进行ASP网站开发时,有时需在客户端调用MSSQL数据库的数据进行打印,若调用数据量小,可以通过在客户端运用FileSystemObjec
- 樂思蜀将SEO工作中所需要的301转向代码进行了整理,收藏并分享,以备查阅。1、IIS下301设置 Internet信息服务管理器 ->
- 在本文中,此示例标准蓝图的存储过程命名方法只适用于SQL内部,假如你正在创建一个新的存储过程,或是发现一个没有按照这个标准构造的存储过程,即
- 和朋友讨论时,我提到过一个观点,所有框架层设计中,最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航!”因为良好的导航可以保
- XML是一项热门的技术。它之所以能够引起人们的兴趣,一个主要的原因在于它十分的简单,人们可以很容易地理解和使用它。每一个程序员都能轻易地看懂
- 我们的规范到底做到哪一步算是发挥良好的价值?其实一件事物我们理解错根本目的会导致出大不一样的结果,直接反应在设计师到底要体现什么的价值。想想
- a {}{ background:url(images/normal.gif); } a:ho
- 一、控制用户存取 1、创建修改用户Creating Users Create/alter user new_user identified
- 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的编写,刚开始不会体会出SQL语句各种写法的性能优劣,但是如果将应
- 在web2.0的站中用户互动性是很强的,例如用户留言我们可能放开img标签,允许用户外链其他站点的图片,那么我们就需要解决图片尺寸过大所带来
- 在使用ASP来进行后端的数据合法性校验的时候,有些人为满足不同环境下面的数据校验,编写了很多的函数来实现,比如,我们想要校验用户输入的URL