文档章节

CSS纯图片圆角Box的实现技巧

西西爱OS
 西西爱OS
发布于 2012/09/29 13:04
字数 876
阅读 190
收藏 3

CSS实例教程——纯图片圆角Box的实现技巧

BY:htttp://www.iiwnet.com

终于要开始写实战系列了,本站的口号可是理论为辅,实战为主哦。对,你没有看错,就是“纯图片”,不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然,可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容,但在当下图片圆角依旧是主流,丰富的图片效果(渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率)这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的,掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧,你会发现原来用图片实现的圆角也会那么的丰富多彩!

全部浮动法

如果一个CSS初学者写图片圆角效果,那么推荐使用全部浮动法,简单且容易上手。其原理就是左圆角左浮动,主体也左浮动,右圆角右浮动,外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动,且因背景图片全部平铺,所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。

HTML代码如下:

<div class="floatMethod">
<div class="left"></div>
<div class="middle">全部浮动法</div>
<div class="right"></div>
</div>
.floatMethod{width:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}
.floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}
.floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}
.floatMethod .right{float:right; width:8px; height:32px; background:url('roundBox_right.gif') left top
优点:简单、方便、易上手。
缺点:需要清除浮动、圆角图片留白处不能透明。
原理简析:三个div 一起浮动,左右俩个div 放置圆角,外包div 使用背景平铺。

左右浮动法

个人认为左右浮动发是全部浮动法的升级版,修复了圆角图片留白处不能透明的缺陷。原理与全部浮动法有些类似,但现在左圆角左浮动,右圆角右浮动,主体直接放后面。主体利用margin 挤压使得俩个圆角留白处可以透明处下面的背景。

HTML代码如下:

<div class="newFloatMethod">
<div class="left"></div>
<div class="right"></div>
<div class="middle">左右浮动法</div>
</div>

CSS代码如下:

.newFloatMethod{width:350px; height:32px;}
.newFloatMethod .middle{line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}
.newFloatMethod .left{float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}
.newFloatMethod .right{float:right; width:8px; height:32px; background:url('images/roundBox_right.gif')

优点:简单、易上手。
缺点:需要清除浮动。
原理简析:左圆角左浮动,右圆角右浮动,主体直接放后面

滑动门法

滑动门法是一种比较巧妙的方法,使用一个内嵌标签,外部标签为左圆角,内嵌的标签包含了背景与右圆角。要求切图要按照特定的方式切出,切图的图片同浮动法不同。缺点就是对CSS掌握要求比较高,切图也有特定的要求,且要注意宽度,尽量的让图片足够的长,防止宽度不够图片掉出情况发生。

© 著作权归作者所有

西西爱OS
粉丝 16
博文 70
码字总数 52874
作品 0
杭州
私信 提问
35个很棒的HTML5和CSS3教程

CSS3和HTML 5可以影响你设计网站的方式。CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易。下面的列表是今年最新的CSS3和HTML5的教程。 1. The Apple.com navigation menu...

小卒过河
2011/07/01
14.6K
6
10 个实验性的 JS/CSS3 编程技术

本文所介绍的编程技术,可以有效地改善用户体验和设计师的工作流程,替代原先在IE6上使用的旧的解决办法。需要注意的是,下面列出的大部分技术还在实验阶段,而且有些不是纯CSS技术(一些使用...

小编辑
2011/12/09
2.9K
6
好程序员web前端分享CSS3 边框

好程序员web前端分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。 在本章中,您将学到以下边框属性: border...

好程序员IT
05/15
10
0
css揭秘 - 背景与边框 [一]

前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 “css揭秘” 这本...

沉默抒怀者
04/18
0
0
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0

没有更多内容

加载失败,请刷新页面

加载更多

100天搞定机器学习|Day55 最大熵模型

1、熵的定义 熵最早是一个物理学概念,由克劳修斯于1854年提出,它是描述事物无序性的参数,跟热力学第二定律的宏观方向性有关:在不加外力的情况下,总是往混乱状态改变。熵增是宇宙的基本定...

机器学习算法与Python实战
15分钟前
4
0
找子表

select a.constraint_name, a.table_name, b.constraint_name from user_constraints a, user_constraints b where a.constraint_type = 'R' and b.constraint_type = 'P' and a.r_constrain......

兵荒马乱的青春
17分钟前
4
0
Web应用安全如何防御或者检查漏洞?

     Web应用安全如何防御或者检查漏洞?这是大家一直关心的问题。随着计算机技术的发展,网络漏洞也变得越来越多样化了,你知道吗,每隔9 小时就会发布 1 个严重漏洞,并且有可能会进行远...

梅丽莎好
25分钟前
5
0
Vim 复制粘帖格式错乱问题的解决办法

有时候,复制文本(尤其是代码)到 Vim,会出现格式错乱的问题。看样子,应该是自动缩进惹得祸。本文不去深究原因,直接给出解决方法。 1. paste 模式 运行如下命令,进入 paste 模式: :set...

观海562
26分钟前
3
0
OSM初识(三)OSM Data

一 导出数据 将XML格式的OSM数据转换成另一种格式。 二 提取数据 剪切你选择区域内的数据,或者提取出特定区域特定的特征 三 数据格式 OSM文件仅属于OSM,不能用别的软件打开。其中后缀为bz2...

yuankaichao
36分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部