一起CSS

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

上下两张图片CSS圆角

日期:2008-12-7 分类:CSS

与无图 CSS 圆角相比,上下两张图片 CSS 圆角就比较容易制作了,即用切图软件把圆角的上半部分、下半部分分别切出来,然后放到网页中。效果图如下:

CSS圆角

圆角上半部分和下半部分图片:

CSS圆角上半部分

CSS圆角下半部分

上下两张图片和中间元素的左右边框就组成了完整的圆角。

例子代码

XHTML代码:

<div id="box">
<div id="top"></div>
<div id="content"><h1>有图CSS圆角</h1></div>
<div id="bottom"></div>
</div>

XHTML代码不一定要这样写,您可以根据您的实际情况写出更有语义的XHTML代码,这里这样写是为了更好的理解这种制作方法。

CSS代码:

*{
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}

查看效果

#top 放圆角上半部分图片,#bottom 放圆角下半部分图片,#content 设置左右边框,合起来就成了完整的圆角。

查看:645 评论:没有评论 标签:,

相关日志

发表留言

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

提示: 您可以使用一些简单的标签: <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