当前位置：一起CSS
日期：2008-12-16 分类：CSS
今天来用 CSS滤镜来制作圆角效果。正如你所知道的，CSS滤镜只有 IE 浏览器支持，所以这种方法不能真正的用到实际当中，所以就当做是了解一下咯。
首先来看一个例子，点击这里查看 （用 IE 浏览器喔）。
看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角 》例子中圆圈图片的1/4（左上部分）：
代码实现 XHTML代码：
<div id="box"> <h3>CSS滤镜制作圆角</h3> <img class="img1" src="images/yuan9.jpg" /> <img class="img2" src="images/yuan9.jpg" /> <img class="img3" src="images/yuan9.jpg" /> <img class="img4" src="images/yuan9.jpg" /> </div>
CSS代码：
*{ margin:0; padding:0; } #box{ position:relative; width:400px; margin:20px auto; border:1px solid #000; } img{ position:absolute; } .img1{ left:-1px; top:-1px; } .img2{ right:-1px; top:-1px; filter:fliph;/*水平翻转*/ } .img3{ bottom:-1px; left:-1px; filter:flipv;/*垂直翻转*/ } .img4{ right:-1px; bottom:-1px; filter:fliph flipv;/*水平垂直翻转*/ } h3{ padding:20px 0; text-align:center; }
查看效果 和《一张图片实现圆角 》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。
查看：4,966 评论：4 标签：CSS圆角 ,圆角
日期：2008-12-15 分类：CSS
前两天在的 Nathan Smith 的博客上看到他的 hoverbox ，觉得非常的精彩。这是一个图片集，当鼠标移动到每张小图片上，就会有一张大图片出现。他的制作原理是：在标签 a 里放两张一样的图片，第一张图片设置成较小的尺寸，第二张先隐藏，当鼠标移动到第一张图片上时，就让第二张图片显示。原文地址和例子地址如下：
原文地址：http://sonspring.com/journal/hoverbox-image-gallery
例子地址：http://host.sonspring.com/hoverbox/
效果预览：
从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看 。
原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。
=======华丽的分割线=========================================
读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看 。
再次感谢“老鼠”的测试！（2008.12.18）
查看：4,312 评论：7
日期：2008-12-12 分类：CSS
一张图片就能实现圆角？是什么样的图片？怎样实现？
其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：
基本思路
准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。
图片示意：
代码实现
XHTML代码：
<div id="container">
四个 b 为小容器，不要管它们，放上去就是了。
CSS代码：
*{
查看效果
这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：
所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。
另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。
查看：4,593 评论：7 标签：CSS圆角 ,圆角
日期：2008-12-8 分类：用户体验
站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行“加工”，让它在各种环境下都显示一致的效果，而且还给访问者提示。
搜索功能的 XHTML 代码一般如下：
<form id="form1" name="form1" method="post" action="">
默认情况下，在各个浏览中的效果如下图：
给它加上样式：
*{
加上样式之后，在各个浏览器中的效果都如下图：
我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。
javascript代码：
window.onload = function(){
相关解释：
onfocus —— 元素聚焦时触发的事件
onblur —— 元素失去焦点时触发的事件
至此，制作完成。查看效果 。
查看：1,976 评论：1 标签：javascript ,友好
日期：2008-12-7 分类：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代码：
*{
查看效果
#top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。
查看：2,332 评论：没有评论 标签：CSS圆角 ,圆角
，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。
，太小了是吧，不过已经够了。
