CSS高级技巧之圆角矩形上


所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍.

  CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法满足我们设计师的. 所以CSS圆角技术到现在还是那么的火.
 1. 固定宽度的纯色圆角矩形

  在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码.

  html代码如下:

  <div class="wrapper">

  <h1>标题</h1>

  <p>内容</p>

  </div>

  图片大致如下:

  top.gif

  tile.gif

  bottom.gif

  CSS代码大致如下:

  .wrapper{width:181px;background:#8cc355 url(../images/bottom.gif) no-repeat left bottom;}

  .wrapper h1{padding:10px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}

  .wrapper p{padding:0 20px 10px 20px;}

  Tips:

  wrapper中的宽度(width)是图片的真实宽度, 背景中的背景色是与纯色图片相同的颜色

h1和p中相应设置了内补丁,为了内容不重叠或碰到外框.

  图片需要有背景色, 即除了圆角矩形纯色部分的颜色以外的区域需要有和当前容器( div class="wrapper" )所在的父级容器相同的背景色.

  这种方法适用于宽度固定, 高度自适应的纯色圆角矩形.
2. 固定宽度的非纯色圆角矩形

  这个方法是上一个方法的延伸, 这次我们不在容器上定义背景色, 而是定义重复的背景图片.

  html代码如下:

  <div class="wrapper">

  <h1>标题</h1>

  <p>内容</p>

  </div>

  图片大致如下:

  top.gif

  bottom.gif

  CSS代码大致如下:

  .wrapper{width:183px;background:url(../images/tile.gif) repeat-y center;}

  .wrapper h1{padding:20px 20px 0 20px;background:url(../images/top.gif) no-repeat left top;}

  .wrapper p{padding:0 20px 20px 20px;background:url(../images/bottom.gif) no-repeat left bottom;}

  Tips:

  特性与第一个方法类似;

  不能适用于非垂直改变的背景图像.

  PS. 固定高度的圆角矩形也可以类似的完成,不赘述了

  3. 滑动门技术(Sliding Doors)

  前面的两种圆角矩形都是固定宽度的,只能在垂直方向上自适应增长(或水平方向上), 如果需要同时在垂直方向与水平方向上自适应增长尺寸的话, 很显然前两种方法不适用. 这时我们就可以采用所谓的滑动门技术.

本文作者:



相关阅读:
PHP+MySQL5.0中文乱码解决方法
PHP 表单提交给自己
JavaScript:变色日历
Response 对象之Status属性
二招解决php乱码问题
VBS教程:方法-Raise 方法
微软发布为PHP提供的SQL Server 2005驱动
JavaScript组件:编码实现和算法
FreeBSD操作系统的引导
一位高手整理的IIS FAQ
让Linux系统有效防御ARP攻击
增加PHP的Session存储和处理能力
SQL SERVER数据库开发之存储过程应用
用css实现的带阴影的表格效果的代码
快速导航

Copyright © 2016 phpStudy |