一起CSS

当前位置:一起CSS > CSS > 文章正文

百度有啊CSS圆角方案

日期:2009-02-18 分类:CSS

百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。看代码吧: XHTML 代码:

<div class="box1">
    <span class="tl"></span><span class="tr"></span>
    <div class="cc">
        <p>圆角一</p>
    </div>
    <span class="bl"></span><span class="br"></span>
</div>

CSS 代码:

.box1 {
	background:url(images/bg1.gif) repeat-x #1d6cb7;
	margin-top:1em;
	position:relative;
	zoom:1;
	width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
	width:5px;
	height:5px;
	position:absolute;
	background:url(images/bg3.gif) no-repeat;
	overflow:hidden;
}
.box1 .cc {
	height:40px;
	padding:5px;
}
.box1 .tl {
	left:0;
	top:0;
}
.box1 .tr {
	right:0;
	top:0;
	background-position:0 -5px;
}
.box1 .bl {
	left:0;
	bottom:0;
	background-position:0 -10px;
}
.box1 .br {
	right:0;
	bottom:0;
	background-position:0 -15px;
}

查看效果(上面的代码是第一个圆角的)

看看上面代码所用到的图片能更好的理解(下面): 用来制作 CSS 圆角的图片 第一部分是左上角的,第二部分是右上角的,第三部分是左下角的,第四部分是右下角的。

查看:1,309 评论:4 标签:,

相关日志

共有 4 条评论

  • richcss 说:

    ie6,高度或宽度为奇数,会出现问题。

  • 小渔 说:

    .box1 .tr {right:0;top:0;background-position:0 -5px;}
    .box1 .bl {left:0;bottom:0;background-position:0 -10px;}
    .box1 .br {right:0;bottom:0;background-position:0 -15px;}
    青色兄什么意思啊,我看了你做的效果,里面的图片不过10个像素
    background-position:0 -15px;
    哪一个是X轴呢?

    • 小阿布 说:

      当然是前一个background-position:0 -15px;是X横坐标,后面的一个是Y纵坐标
      语法:

      background-position : length || length
      background-position : position || position

      参数:

      length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
      position :  top | center | bottom | left | center | right

      说明:

      设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
      如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
      该属性定位不受对象的补丁属性(padding)设置影响。
      对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。

      示例:

      div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
      menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
      a { background: url("images/aardvark.gif"); background-position: 3.25in; }
      body { background: url("images/aardvark.gif"); background-position: top right; }

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved