CSS学习笔记1-边框颜色会变的input 仿网易邮箱文本框 -

wujiapeng

浏览: 29136 次
性别:
来自: 北京

最近访客更多访客>>

zsy376784873

solaufein

不明身份的大魔王

huaiyong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS学习笔记1-边框颜色会变的input 仿网易邮箱文本框

博客分类：

css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.inp{border:1px solid #84a1bd; width:157px; padding:2px 2px 2px 2px ; background-position: -70px -424px}
</style>
<title>无标题文档</title>
<script language="javascript">
function fEvent(sType,oInput){
   switch (sType){
    case "focus" :
     oInput.isfocus = true;
    case "mouseover" :
     oInput.style.borderColor = '#9ecc00';
     break;
    case "blur" :
     oInput.isfocus = false;
    case "mouseout" :
     if(!oInput.isfocus){
      oInput.style.borderColor='#84a1bd';
     }
     break;
   }
}
</script>
</head>
<body>
<input type="text" size="20" onFocus="fEvent('focus',this)" onBlur="fEvent('blur',this)" onMouseOver="fEvent('mouseover',this)" onMouseOut="fEvent('mouseout',this)" class="inp" />
</body>
</html>
//////////////////////////////////////////////////////////////////////
给文本加边框

　　上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码是：style="border:thin solid red"；“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。我们定义边框，实际上就是设定这三个参数值。
　　边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。
　　边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），注意：如果系统不支持这些边框的属性值，那么“dotted”、“dashed”、“double”、 “groove”、“ridge”、“inset”和“outset”都会被“solid”代替。
　　边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。
　　从上面可以看出，给文本加边框确实很简单，上例中后面那几个边框的设置，我不讲你也明白了吧！在这里告诉你一点小技巧，给一段文本加边框，可把CSS 加在〈P〉标记里；给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；若是要给一行文本加几个不同的边框，则需要把文本放在表格里，再把CSS分别加到〈TD〉标记里。

分享到：