iLeichun

当前位置：首页 > CSS

css设置table表格的边框为单线边框的几种方式

分类:CSS  来源:网络  时间:2022-3-24 15:29:08

方式一、

先给整个table表格的外边框加上左边框和上边框

table {

width: 300px;

border-top: 1px solid #999;

border-left: 1px solid #999;

border-spacing: 0;    /*去掉单元格间隙*/

}


再给table表格里的每个单元格添加下边框和右边框

table td {

padding: 5px 30px;

border-bottom: 1px solid #999;

border-right: 1px solid #999;

}


说明：

border-spacing 属性：可以设置相邻单元格的边框间的距离（仅用于“边框分离”模式），即 border-collapse 为 separate 时（separate 是默认值）。

当我们设置border-spacing: 0;时，就表示table表格中每个相邻单元格的边框间（水平和垂直方向）的距离都为0。



方式二、

table {

width: 300px;

border-collapse: collapse;

}


table td {

padding: 5px 30px;

border: 1px solid;

}


阅读全文>>
浏览(3470) | 评论(0)

css文本显示的一些技巧

分类:CSS  来源:网络  时间:2017-11-15 23:55:36

本文讲解css文本显示的一些技巧，希望这些技巧能帮助到你。


1、超出文本框的文字显示为“...”

text-overflow:ellipsis;     /* 缺少这项将不会显示“...” */

white-space:nowrap;         /* 缺少这项会导致文本换行 */

overflow:hidden;            /* 缺少这项会导致文本完全显示出来 */

以上各项缺一不可，但顺序不限。

另外需要设置width，这个值可以是固定的，如width:300px;也可以被外部容器限制宽度。如果你不设置width，里面的文本就永远没有超出的机会了。



阅读全文>>
浏览(2804) | 评论(0)

实现并列布局的7种方式

分类:CSS  来源:网络  时间:2012-4-11 21:25:50

首先说明要求,实现3个容器并列布局,如下图所示:
实现3个容器并列布局
这种题在web前端css部分笔试题中经常出现.通过这题能考察出应聘者对css的掌握程度,其考察的面非常广.公司里刚来的前端我也给他出了这样一题,不过我说的至少写出3种实现方式.当时自己想到的有5种实现方式,后来回来一总结才发现可以有7种实现方式满足上述要求,但不限于7种.我目前只能想到这几种.所以特做总结,和大家分享.

1.最常用的方式:float

这是最常用的一种方式,利用float属性向左或右浮动便可实现。

主要html代码：

1
2
3
<DIV id=c1></DIV>
<DIV id=c2></DIV>
<DIV id=c3></DIV>

主要css代码：

1
2
3
4
5
6
7
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    float:left;
    margin:20px;
}

2.利用table布局实现
这也算是很早以前较常使用的方式。
主要html代码：

1
<TABLE><TBODY><TR><TD><DIV id=c1></DIV></TD><TD><DIV id=c2></DIV></TD><TD><DIV id=c3></DIV></TD></TR></TBODY></TABLE>

3.使用position:absolute绝对定位实现
主要html代码：

1
2
3
<DIV id=c1></DIV>
<DIV id=c2></DIV>
<DIV id=c3></DIV>

主要css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    position:absolute;
}
#c1{
    top:20px;
    left:20px;
}
#c2{
    top:20px;
    left:260px;
}
#c3{
    top:20px;
    left:500px;
}

4.利用position:relative相对定位实现
主要的css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    position:relative;
}
#c2{
    top:-400px;
    left:240px;
}
#c3{
    top:-800px;
    left:480px;
}

5.利用display:inline-block实现
对于这种方式,有高手推荐完全用这个属性来取代float.大家自行斟酌吧。
主要的css代码:

1
2
3
4
5
6
7
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    margin:20px;
    display:inline-block;
}

6.利用display:table来实现
该方法类似于table布局实现.
主要html代码：

1
2
3
4
5
6
7
<DIV id=container>
<DIV id=row>
<DIV id=c1></DIV>
<DIV id=c2></DIV>
<DIV id=c3></DIV>
</DIV>
</DIV>

主要的css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
#container{
    display:table;
}
#row{
    display:table-row;
}
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
    border-right:40px solid #fff;
    display:table-cell;
}

7.利用css3新属性column实现
这种方法可能是大家最陌生的一种,ie8及以下浏览器都不支持。
主要html代码：

1
2
3
4
5
<DIV id=container>
<DIV id=c1></DIV>
<DIV id=c2></DIV>
<DIV id=c3></DIV>
</DIV>

主要的css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container{
    width:700px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        -webkit-column-width: 200px;
  
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -moz-column-width: 200px;
  
        column-count: 3;
        column-gap: 20px;
        column-width: 200px;
}
#c1,#c2,#c3{
    width:200px;
    height:400px;
    background-color:#459898;
}

希望大家能给出更多的实现方案以前分享.博客也很久没更新了,主题最近一段时间也没进展.

来源：http://gulangfish.com/?p=768

阅读全文>>
浏览(7652) | 评论(0)

CSS线性渐变linear-gradient

分类:CSS  来源:网络  时间:2012-4-11 21:21:33

今天分享一个CSS的线性渐变功能，比较舒服，比起用图片来，方便不少！！

要创建一个线性渐变，关键在于设置一个渐变的方向和渐变的起止颜色！

这里直接给出一个示例，兼容各大主流浏览器，其中IE用了滤镜！

<style>
.nuodou_com{/* 背景色渐变 兼容不同内核浏览器 */
    background:-webkit-gradient(linear,left top,left bottom,from(#ff0000),to(#0000ff));
    background:-moz-linear-gradient(top,#ff0000,#0000ff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=¹#ff0000¹,endColorstr=¹#0000ff¹);
    background:-o-linear-gradient(top,#ff0000,#0000ff);
    background:linear-gradient(top,#ff0000,#0000ff)
}

.box-border{ border:1px solid #ccc; width:200px; height:200px; line-height:30px; }
</style>

<div class="box-border nuodou_com"> </div>

如下图：

来源：http://www.nuodou.com/a/186.html

阅读全文>>
浏览(7628) | 评论(0)

解决input标签与图片按钮水平对齐问题

分类:CSS  来源:网络  时间:2012-4-11 21:20:12

在页面设计的时候，很容易就碰到 input 标签与图片按钮、与<A>标签或 button 按钮与<A>标签等之间水平对齐的问题，记录一下，不再费口舌了！

这里以一个“登录-注册”按钮的例子来说明一下，Html代码及相关CSS样式：

<style type="text/css">
.btn input { padding:0px; border:none; }
.btn2 { vertical-align:middle; background:url(login-btn.gif) #ffffff; color: #FE6591; display: inline-block; font: 700 14px "microsoft yahei"; cursor: pointer; text-align:center; height: 30px; line-height: 30px; width: 80px; padding:0px; }
</style>
<li class="btn"><input type="submit" class="btn2" value="登 录" name="login" id="login">　<a href="register.php" class="btn2" id="reg">注 册</a></li>

从上面的CSS可以看出，解决方法其实很简单，只要加上 vertical-align:middle 属性就可以了。

其它样式可以自己体会！！

也可以用以下CSS来测试， vertical-align:middle 还是不能少，只是换作了无图按钮！

<style type="text/css">
.btn input { padding:0px; height:32px; }
.btn2 { background:#ffffff; border:1px solid #0DC7E2; border-radius: 4px 4px 4px 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); color: #FE6591; display: inline-block; font: 700 14px "microsoft yahei"; cursor: pointer; text-align:center; vertical-align:middle; width:100px; height:30px; line-height:30px; }
</style>

来源：http://www.nuodou.com/a/765.html

阅读全文>>
浏览(7326) | 评论(0)

CSS3 icon font完全指南

分类:CSS  来源:网络  时间:2012-4-11 21:16:43

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法。

为什么要将icon做成字体？

在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 index透明等。

比如，twitter用到的各种小icon：

这种情况下，使用字体来实现图标就有很多优势：

  • 字体文件小，一般20-50kb；
  • 容易编辑和维护，尺寸和颜色可以用css来控制；
  • 透明完全兼容IE6；

如何将icon变成字体？

最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。

我们要用到一些字体编辑软件，比如FontCreator、FontLab等，这里我们用FontLab来演示。

还原步骤很简单：

PSD–>eps–>FontLab，即将PSD转换为illustrator的eps格式，然后将某个字符复制到FontLab中即可。

具体步骤：

打开设计稿psd，将其保存为Photoshop eps格式，我们这里以Qzone中说说发表框的表情icon为例：

在illustrator中打开保存的eps文件：

取消分组，然后点选某个icon，复制。

打开FontLab，随便打开一款字体文件，比如tahoma.ttf：

然后双击某个字符，将原有图形删除，粘贴刚才复制的icon对象：

调整图形大小，一个icon就完成还原了。

就是这么简单。所有icon还原完之后，生成字体文件就可以了。

查看字体对应字符，可以在字体列表中，在某个字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：

可以看到字体对应的字符是i，unicode编码是0069。

字体格式的浏览器支持：

目前，各个浏览器对字体格式的支持是最大的区别：

  • webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；
  • Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
  • Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
  • Opera：支持.ttf、.otf、.svg。尚不支持woff；
  • IE：只支持eot格式，IE9开始支持woff。

注：以上资料来自于：webfonts.info

注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。详情可查看wiki：

在CSS中使用icon字体：

先使用font-face声明字体：

 

1
2
3
4
5
6
7
8

@font-face {
    font-family: ¹emotion¹;
    src: url(¹emotion.eot¹); /* IE9*/
    src: url(¹emotion.eot?#iefix¹) format(¹embedded-opentype¹), /* IE6-IE8 */
         url(¹emotion.woff¹) format(¹woff¹), /* chrome、firefox */
         url(¹emotion.ttf¹)  format(¹truetype¹), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url(¹emotion.svg#svgFontName¹) format(¹svg¹); /*  iOS 4.1- */
    }

 

然后，在icon元素上使用该字体就好了：

 

1
2
3

.icon{font-family:"emotion" Tahoma;
...
}

 

最后，在页面中使用这个字体：

<span class="icon">i</span>

支持CSS3的浏览器可以更上流一点儿，我们每次修改html可能没那么方便，如果要改变某个icon，则可能需要修改相关字符，比如将i修改为e等。如果使用css3的伪元素，可以方便很多：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.icon{
display:inline-block;
width:16px;
height:16px;/*占个位**/
...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content:"i";/*在这里调用字符*/
width:16px;
height:16px;
margin-left:-16px;/*position:absolute什么的也可以，看具体情况*/
}

 

嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。

IE依然棘手：

因为IE9以前只支持eot格式，所以需要将ttf转换为eot先，这里可以使用微软官方的WEFT软件，也可以使用一些在线工具：

  • http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式；
  • http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式

另外，eot文件必须添加域名白名单才可以使用，这里推荐使用CreateMyEOT：

总结：

其实，这种方法有一个不足，就是只支持纯色icon，最多能高端浏览器上实现渐变色或图形蒙板。

当然，我们有很多场景是用纯色icon，特别是在Windows 8这种Metro UI开始越来越多的时候。

另外，这种方法可以有效减少页面的请求，但是对于习惯使用CSSGaGa的auto sprite功能的同学来说，这种方法对页面性能的提升不大。

但是对于移动终端，特别是webapp中，这种方法还是有很大的用武之地的，可以很方便的兼容多分辨率，配合离线存储效果更佳。

如果你有这方面更好的建议和意见，欢迎提出。

 

来源：http://www.qianduan.net/css3-icon-font-guide.html

阅读全文>>
浏览(8066) | 评论(0)

10款实用的CSS开发助手推荐

分类:CSS  来源:网络  时间:2012-4-11 20:52:56

本文整理了10款非常实用的CSS工具，这些工具可以帮你处理一些单调重复性的工作，大大提高了Web开发工作效率，简化了工作流程。

1. Animatable

该工具用于创建CSS3动画，创建的动画可以在任何平台或设备（包括Android、BlackBerry、iOS 和WebOS等）中的现代浏览器中运行。即便你不熟悉CSS，该工具也能帮助你创建多场景的CSS3动画。

2. CSS3 Buttonize Framework

这是一个轻量级、灵活、即时按钮框架。只需简单选择按钮样式示例，然后根据提供的链接下载CSS代码即可。该框架还会告诉你如何使用这些代码。

3. Patternify

这是一个简单的CSS图案生成器。你可以在基于Web的图形化界面中绘制你想要的图案，然后该工具将自动生成CSS代码。

4. CSS3 Patterns Gallery

正如该工具的名字，这是一个CSS图案画廊，网页中显示了每个图案的预览，单击你需要的图案，即可显示该图案的CSS代码。

5. Columnal

这是一个CSS网格系统，整合了两套自定义CSS代码。Elastic网格系统来自cssgrid.net，另外一些来自960.gs。

6. Spritemapper

该工具可以将多个图片合并成一个，并生成相应切片的CSS配置代码。这样，既节省了你写代码的时间，又提高了网页加载时间。

7. The Web Font Combinator

该工具通过示例，让你直观地试验、预览页面中各部分（标题、副标题、正文）字体的效果。

8. Layer Styles

这是一个基于浏览器的图形编辑器，你可以在一个对话框（类似于Photoshop图层样式对话框）中设置图形的样式，然后该工具会自动生成CSS代码。

9. Sencha Animator

这是一个桌面应用，允许你创建可在现代浏览器和触屏移动设备中运行的CSS3动画。

10. Holmes

这是一个CSS样式诊断工具，通过添加一个类，即可在页面中高亮显示一些错误或无效的HTML/HTML5标记，如使用红色边框显示错误信息、黄色边框显示警告信息、灰色边框显示不赞成使用的样式，还可以突出显示可改进的标记、非W3C元素和属性等。

阅读全文>>
浏览(7269) | 评论(0)

vertical-align：让表单与文字垂直对齐

分类:CSS  来源:网络  时间:2012-4-2 13:40:41

在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：

于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（baseline等名词如果不懂，请先阅读wheatlee的文章）

按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：

 

<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;"  src="testpic.gif" />
测试文字

 

代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：

但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。

但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：

如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：

在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果(虽然不明白为什么会这样)。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，进而对垂直对齐的结果进行“微调”呢？

最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：


 

最终效果：

至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：


 

而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：


 

至此，我的研究过程告于段落。

但是，还是想不通各浏览器为什么最后会显示出这样的效果，其中的原理是什么。牛人们有空可以解释一下吗？

原文： http://www.hplus.org.cn/blog/2009/07/143

阅读全文>>
浏览(7450) | 评论(0)

用CSS实现渐变字体的效果

分类:CSS  来源:网络  时间:2012-4-2 13:21:53

这种利用CSS技术来制作出渐变或特殊的文字效果并不少见，好处就是可以在一些大标题中为字体添加渐变效果，而不需要每次都用图片替代，比如本文的最后这些案例。

你想制作漂亮的标题而不用将每个标题都做成图片吗？这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空<span>标签，它使用背景图片和position:absolute属性将标题覆盖。该技巧经主流浏览器测试：Firefox, Safari, Opera, 以及Internet Explorer 6。

 

好处

  • 这是一个纯CSS技巧，无需JS或Flash。它兼容主流浏览器包括IE6 (需要使用PNG hack)。
  • 它对于设计标题是很完美的。你无需使用Photoshop制作每一个标题。这也显然能够节省你的时间和带宽。
  • 你当然可以是用任何网络字体和字体型号。

它是如何工作的?

这个小技巧很简单。基本上我们只是在文字上面添加了一个1px的渐变PNG图片(使用alpha透明)

screenshot

HTML代码

 

<h1><span></span>CSS Gradient Text</h1>

 

CSS代码

这里的关键点是h1 { position: relative } 和h1 span { position: absolute }

 

 

是的，就这些，你已经搞定了。点击此处查看演示页面。

让它在IE6中可用

因为IE6不能正确渲染24位PNG图片，为了显示透明的png图片，下面的hack是必须的。(使用HTML条件注释的方法)在head部分的任何一个地方添加以下代码：

 

<!--[if lt IE 7]>
<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=¹gradient.png¹, sizingMethod=¹scale¹);
}
</style>
<![endif]-->

 

这正式我们为什么憎恶IE6的原因之一！

jQuery动态加入版本(对语义爱好者有用)

如果你不想在标题里面有个空的<span>标签，你可以使用Javascript动态加入<span>标签。使用jQuery的prepend 方法可以很容易的实现：

 

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
  //prepend span tag to H1
  $("h1").prepend("<span></span>");
 
});
</script>

 

更多的例子

想要实现Web 2.0的光滑文字？

screenshot

如此类推，你可以将此技巧用于任何固定背景色的情况(渐变色和背景色一样)

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

图案/纹理

你也可以用一个砖瓦背景图片。看呀，这就是这就是一个斑马图案。——那么，随意发挥吧!

screenshot

局限性…

  • 这个技巧只适用于固定背景色的元素。你的渐变色(PNG 图片) 必须与背景色是同一个颜色。
  • 如果你想兼容IE6，就需要使用IE6的PNG hack(比如滤镜或JS方法)
  • 如果你的渐变图片比标题要高，那么这个文字将是不能被选择的。

 

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}
阅读全文>>
浏览(7437) | 评论(0)

CSS网页背景渐变色

分类:CSS  来源:网络  时间:2010-12-17 23:39:16

css渐变色

FILTER:progid:DXImageTransform.Microsoft.Gradient使用

语法：

filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,GradientType,startColorStr=iWidth,endColorStr=iWidth)

属性：enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。   true | false

　　     true: 默认值。滤镜激活。

　　     false:滤镜被禁止。

       GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0

　　     1:默认值。水平渐变。

　　     0:垂直渐变。

       startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

　　     其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。

         取值范围为 00 - FF 。   RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，

         AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

     　　取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 

       EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅

         startColorStr 属性。默认值为 #FF000000 。不透明黑色。

程序举例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<style type="text/css">

<!--

body {

font-size: 12px;

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr=#6699cc, StartColorStr=#ffffff);

height: 100%;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

-->

</style>

</head>

<body>

<p> </p>

</body>

</html>

文字的渐变效果：

.FadeLine

{

padding-right: 0px;

border-top: #538f65 2px solid;

padding-left: 0px;

font-size: 22px;

filter: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=10,startX=10,finishX=100);

padding-bottom: 0px;

margin: 0px;

color: #3366cc;

padding-top: 0px;

}

渐变起始颜色，ff为16进制透明度

endColorStr=#ffeeeeee

endColorStr为渐变结束颜色，ff为16进制透明度

gradientType=0

gradientType渐变方向，0为垂直方向， 1为水平方向（默认值为1）
 

阅读全文>>
浏览(8869) | 评论(0)
文章分类
点击排行
推荐列表
最新列表
Copyright © 2010-2024  Lession. All Rights Reserved   闽ICP备10018677号
iLeichun  网站地图