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

2016-02-19 23:54 2 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 真多 -_-!）。

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

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

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

css sprites把很多小图集成在一张图片上

标签： Web开发

在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上。这样做的好处是不言而语：加速图片显示利用CSS技巧减小HTTP请求 ...

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

标签： Web开发

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

用js实现CSS圆角生成更新

标签： Web开发

用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基人遥仍失遥士大夫工士大夫花样百出地苛夺花...

一张图片说蒙板［原创］

标签： PS PS教程

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

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

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

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

查看更多精彩>>