CSS圆角——透明圆角化背景图片

序言：第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。

在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！

还是先看看最终的效果图，让大家有一个大概的印象。

图一

像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。

当然对于一些比较有经验的人员来说，可以采用九宫格布局（可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。

而我现在独创的这种方法可以完全做到适应不同宽度的需要，并且全部兼容所有的浏览器，而所需要的仅仅是一张很小的水平平辅的背景图片而已。

废话少说，言归正传。

基本原理：

我们都知道图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？其实道理说明了也就是一件很简单的事情，你看过下面的放大示意图后可能就会“哦”地一声，原来不过如此……

图二

是的，看到这个效果图你会一目了然，可是要想到这个方法，我却浪费了不少脑细胞。呵呵！

实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并结合背景定位background-position方式来达到效果。我们知道，同一张图片加载多少次对于性能的影响并不大，因为这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。

但是需要注意的是：每个B标签加载图片的定位是不一样的。

背景图片定位原理：　　

b1标签位于第一位，它主要用来描绘上边框线，所以它不需要加载背景图片。

b2标签位于第二位，它是第一个需要加载背景图片的，但是不需要图片负偏移，所以直接居左居顶定位就可以了。

以下是代码片段：

.b2{background-position:left top;}

b3标签位于第三位，它需要加载背景图片，让它的背景图片向上负偏移b2的高度值就可以，也就是1px。

以下是代码片段：

.b3{background-position:left -1px;}

b4位于第四位，所以它向上负偏移b2+b3高度值的和，为2px.。

以下是代码片段：

.b4{background-position:left -2px;}

H3标签位于第五位，所以它的背景图片需要向上负偏移b2+b3+b4高度值的各，也就是4px；

以下是代码片段：

h3{background-position:left -4px;}

这样，b2、b3、b4、h3的图片叠加起来和原始图片上下渐变的效果完全重合，如同一张图片，这样就达到模拟圆角图片的效果。

怎么样，原理够简单明了吧！

原理清楚后，要实现起来也就是一件水到渠成的事！

HTML结构层：

如同我们在第一章中模型所见，保持结构不变。

CSS样式层：（只写关键代码）

将上面的几句代码进行合并，如下所示：

以下是代码片段：

.sharp b.b2{background-position:left top;}

.sharp b.b3{background-position:left -1px;}

.sharp b.b4{background-position:left -2px;}

.sharp .content h3{background-position:left -4px;}

和第一章中同样的道理，我们肯定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤方案，当一个页面要多次调用同一个圆角框时，也可以让它们有些丰富的变化。实现不同的风格。OK，没问题，你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。

以下是代码片段：

.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}

你可以实现不同的颜色方案，就看你的设计师给你多少张不同图片了。

一种风格的定制也是一件简单的事情：

以下是代码片段：

*颜色方案一,绿色风格----------------------------------------*/

/*边框色*/

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,

.color1 .b7,.color1 .content{border-color:#A0C044;}

.color1 .b1,.color1 .b8{background:#A0C044;}

.color1 h3{border-bottom:1px #679800 solid;}

/*图片路径*/

.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}

/*文字内容背景色*/

.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}

你只需要复制上面的代码，简单修改一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想应用样式的容器上定义这个color1类名即可。

在我的演示模型中，我定义了9种风格的变化，看看有没有适合你需要，直接复制就可以使用了，祝您用得开心！

为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

点击这儿下载完整的压缩包：  2.rar

CSS占位隐藏

它和display:none不一样，display只要none了，空间就腾出来了；

可是，visibility:hidden;却依旧可以占位，很多时候这个属性特别有用；

div左中右排列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

<style type="text/css">

        .fl{float:left;display:inline;}

.fr{float:right;display:inline;}

.leftcol,.rightcol{width:300px;height:400px;}

.main{height:400px;background-color:blue;}

.leftcol{background-color:green;}

.rightcol{background-color:yellow;}

.content{width:900px;margin:10px auto;}

.cl{clear:both;}

    </style>

<div class="content">

  <div class="fl leftcol">左边的内容</div>

  <div class="fr rightcol">右边的内容</div>

  <div class="main">主要内容</div>

  <div class="cl"></div>

</div>

<p style="float:left;width:200px;">这个是第1列，</p>

<p style="float:left;width:400px;">这个是第2列，</p>

<p style="clear:left;">这个是第3列。</p>

</body>

</html>

固定宽度CSS版式布局

固定宽度CSS版式布局<http://www.aa25.cn/layout/> 

红色字符和背景标识的为比较实用的结构自适应(弹性)宽度CSS版式布局

标准布局常见问题及解决办法(我要评论以上模板 <http://www.aa25.cn/491.shtml#comm>)

CSS2.0盒模型层次平面示意图和3D示意图

3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法

上边容器浮动后，下边的容器跟着浮动，造成页面错乱

如以上例子中的footer必须要单独占一行，但当sidebar浮动后，content的高度小于sidebar的高度时，footer也跟着浮动到sidebar右侧了，造成页面错乱。解决办法是在maincontent和footer之间插入一个容器，设置样式 clear:both; height:0; font-size: 1px; line-height: 0px;用clear:both清除，即可使页面正常

当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了

相对定位与绝对定位

规划页面时，许多时候需要用到相对定位或绝对定位，这里边有个技巧，掌握后有些地方就不用繁冗的js了。就是当父容器使用相对定位后，此时子元素再使用绝对定位，位置是相对于父元素。如果父元素没有定位，那么子元素的绝对定位是相对于浏览器

IE6双倍边距bug

当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug

加线条

border-bottom:dashed 1px #00FF00;

border-top

dashed:虚线

solid:实线

web css的更多相关文章

  1. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  2. 移动Web—CSS为Retina屏幕替换更高质量的图片

    来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...

  3. web@css样式进阶--图形字体、动画、显隐....

    1.图形字体<i class="fa fa-heart"></i> 操作类名,需<link rel="stylesheet" hr ...

  4. web@css高级选择器(after，befor用法),基本css样式

    1.高阶选择器:子代后代,相邻通用兄弟,交集并集,属性,伪类,伪元素子代后代选择器 div>p{}  div p{}相邻通用兄弟 div+p{}  div~p{}理解:div同学的同桌p  di ...

  5. web@css引入方式，基本选择器,3大特性,高效运行

    4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素.      1.不要再ID选择器前使用标签名        解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...

  6. Web—CSS概述

    一.概念: 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言 的一个子集)等文件样式的计算机语言. 二.特点: 1.实现网页内容与样式的分离     2.降低图形文件的 ...

  7. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  8. web@css普通布局 , 高级布局 , 布局坑

    1.高级布局<文档流概念>:页面从上至下,块式标签一行一行排列,内联式一行中从左至右排列<BFC规则>:左右位置(左右margin)垂直位置(上下margin)容器内外(互不影 ...

  9. web@css盒模型详解

    Margin(外边距) - 清除边框外的区域,外边距是透明的./*上 右 下 左*/ 上 左右 下 /*上下 左右*/ 四方 /Border(边框) - 围绕在内边距和内容外的边框.      可以用 ...

随机推荐

  1. spring boot gateway自定义限流

    参考:https://blog.csdn.net/ErickPang/article/details/84680132 采用自带默认网关请参照微服务架构spring cloud - gateway网关 ...

  2. UDP信号驱动IO

    SIGIO信号 信号驱动式I/O不适用于TCP套接字, 因为产生的信号过于频繁且不能准确判断信号产生的原因. 设置信号驱动需把sockfd的非阻塞与信号驱动属性都打开 server sockfd单独提 ...

  3. js提交图片转换为base64

    $("#picAjax").change(function () { var strs = ""; var file = $("#picAjax&qu ...

  4. oracle--二维表的操作创建修改删除

    oracle学习内容 oracle的管理系统学习 oracle的数据管理学习 oracle的用户管理 oracle二维表管理 创建表和字段讲解 --创建表学习 1. 创建表的基本语句:create t ...

  5. 多线程06-Lock

        ; i < ; i++)             {                 c.Increment();                 c.Decrement();      ...

  6. 多线程04-ThreadPriority

        ; i < ; i++)             {                 Thread.Sleep();                 Console.WriteLine( ...

  7. JAVA10以上版本 搜索不到 dt.jar和tools.jar

    从jdk-9之后就已经没有tools.jar和dt.jar了,也不需要在classpath里面配置这些jar了,配置可参考:JAVA_HOME=jdk安装路径JRE_HOME=jre安装路径PATH= ...

  8. Super Mario HDU 4417 主席树区间查询

    Super Mario HDU 4417 主席树区间查询 题意 给你n个数(编号从0开始),然后查询区间内小于k的数的个数. 解题思路 这个可以使用主席树来处理,因为这个很类似查询区间内的第k小的问题 ...

  9. Vue源码解读之Dep,Observer和Watcher

    在解读Dep,Observer和Watcher之前,首先我去了解了一下Vue的数据双向绑定,即MVVM,学习于:https://blog.csdn.net/u013321...以及关于Observer ...

  10. .linux基础命令三

    一. 两台服务器免密登录: 1. 生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令查看指令: 通过命令”ssh-keygen -t rsa“创建一对密匙,包括公匙和私 ...