CSS實現文字的邊框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Cross-Browser Text Glow Demo</title>
<mce:style type="text/css"><!--
* {
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
}
div {
position:absolute;
top:20px;
left:20px;
padding:0;
color:#000;
z-index:3;
}
#d2, #d3, #d4, #d5, #d6, #d7 {color:#fd6;}
#d8, #d9, #d10, #d11, #d12, #d13 {color:#ffa;}
.top {color:#fff;}
#d2 {
top:19px;
left:19px;
z-index:2;
}
#d3 {
top:21px;
left:21px;
z-index:2;
}
#d4 {
top:19px;
left:21px;
z-index:2;
}
#d5 {
top:21px;
left:19px;
z-index:2;
}
#d6 {
top:19px;
z-index:2;
}
#d7 {
top:21px;
z-index:2;
}
#d8 {
top:18px;
left:18px;
z-index:1;
}
#d9 {
top:22px;
left:22px;
z-index:1;
}
#d10 {
top:18px;
left:22px;
z-index:1;
}
#d11 {
top:22px;
left:18px;
z-index:1;
}
#d12 {
top:18px;
z-index:1;
}
#d13 {
top:22px;
z-index:1;
}
--></mce:style><style type="text/css" mce_bogus="1">* {
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
}
div {
position:absolute;
top:20px;
left:20px;
padding:0;
color:#000;
z-index:3;
}
#d2, #d3, #d4, #d5, #d6, #d7 {color:#fd6;}
#d8, #d9, #d10, #d11, #d12, #d13 {color:#ffa;}
.top {color:#fff;}
#d2 {
top:19px;
left:19px;
z-index:2;
}
#d3 {
top:21px;
left:21px;
z-index:2;
}
#d4 {
top:19px;
left:21px;
z-index:2;
}
#d5 {
top:21px;
left:19px;
相关文档：
我们把它分为如下图所示块
具体的HTML,DIV+CSS排版样式为
我们一行一行分析,
1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法
#Head{
text-align:center;
}
为什么Head前面有一个"#"号呢?
而有的却是在前面加一个"．"比如 "．Head",有时候写css的时候干脆什么也不� ......
介于纯粹CSS的无图片圆角实在是代码太乱，还是倾向于利用图片结合CSS来自做圆角；
（1）高宽皆自适应：
.roundedcornr_box_510746 {
background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
background:transparent url(r ......
1. 定义样式
1.1 按html标签定义
例如：body{background-color:#999999; text-align:center}
1.2 按类定义
例如：.style1{border-style:solid; border-color:#0000FF; border-width:1px}
1.3 按id定义
例如：#style2{border-style:solid; border-color:#FF0000; border-width:1px}
2. CSS的位置和引用
......
1、IE与Firefox下对CSS解析的区别
对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时 ......
