CSS教程：一张图片实现圆角

2016-02-19 23:54 7 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的CSS教程：一张图片实现圆角，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

一张图片就能实现圆角？是什么样的图片？怎样实现？

其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：，太小了是吧，不过已经够了。

基本思路

准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。

图片示意：

代码实现

XHTML代码：

div id="container"
h1一张图片实现圆角/h1
b class="lt"/b
b class="rt"/b
b class="lb"/b
b class="rb"/b
/div

四个 b 为小容器，不要管它们，放上去就是了。

CSS代码：

*{
margin:0;
padding:0;
}
#container{
position:relative;
margin:20px auto;
padding:20px;
width:400px;
height:50px;
border:1px solid #000;
}
b{
position:absolute;
width:5px;
height:5px;
font-size:0;
background-image:url(images/yuan8.jpg);
background-repeat:no-repeat;
}
.lt{
left:-1px;
top:-1px;
background-position:left top;
}
.rt{
right:-1px;
top:-1px;
background-position:right top;
}
.lb{
left:-1px;
bottom:-1px;
background-position:left bottom;
}
.rb{
right:-1px;
bottom:-1px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}

这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：

所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。

另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。

来源:http://www.tulaoshi.com/n/20160219/1630848.html

上一篇：天翼宽带客户端使用指南
下一篇：如何创建别人进不了也删除不掉的文件夹

看过《CSS教程：一张图片实现圆角》的人还看了以下文章更多>>

div+css实现圆角边框

标签： Web开发

div+css实现圆角边框，在网络上查看了一下，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。用代码说明问题： html head style #a{ border-left:1px #333 solid; border-right:1px #333 solid; width:300px; height:500px; } .b{ height:1px; overflow:hidden; border-left:1px #333 solid; border-right:1px #333...

怎样将两张图片合成一张 PS图片合成基础教程

标签： PS教程

方法1：一：打开需要合成的照片素材（按文件—打开）、（上图为素材一）。二:每一个刚导入进去的图片，都会有一把锁，想要在这个图层上进行一些操作的时候都需要解锁的。现在在图层面板上双击背景图层解锁。三：使用工具栏中的魔棒工具，然后点一下图片中...

怎样快速把两张图片合成一张

标签：摄影人像摄影静物摄影

怎样快速把两张图片合成一张 1.图片的准备：自然到百度图片查找就是，任意图片，任意选择，应有尽有，本文所有图片来自于百度美女图片。 2.软件的安装：iSee图片专家，百度搜索即可，下载安装，这个软件基本也是装机必备了。 3.打开iSee图片专家，找到自己准备好的两个图片。 4.点击左上角的文件-新建-图...

CSS教程:可扩展圆角标签的实现方法

标签： Web开发

在制作网页的时候，很流行使用标签的方式进行分类显示，圆角标签具有样式美观、表现方式形象的优点，一般我们都会将圆角标签的背景制作成一张图片，这样做的不足之处是如果标签文字字数变化（如图1），固定的背景图片不能随之进行扩展。这样我们就需要制作很多张不同宽度的背景图片，很不方便。下面介绍两种制作可扩展圆角标签的方法。 ...

一张图片说蒙板［原创］

标签： PS PS教程

本文由中国七段原创，转载请保留此信息！蒙板,通道,图层混合,是PS学习中的三只拦路虎.我认为,之所以初学者觉得很难,关键是很多人在讲述他们应用的时候,把简单的问题给搞的复杂化了.比如蒙板,本来是个非常简单的问题,但我发现搞不明白的人是如此之多.而网上关于蒙板的教程又少的可怜.偶尔见到,也大多语焉不详,反而把蒙板搞的更加神...

查看更多精彩>>