<!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〉标记里。
分享到:
相关推荐
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性如何使用CSS(14)-边框属性
HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
title: 07、CSS基础笔记02----对齐方式tags: CSDN迁移上对齐中对齐下对齐。
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS3输入文字input文本框动画效果
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
高仿网易邮箱登录界面 HTML CSS JS
基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目,下载即用无需修改。 基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目,下载即用...
jQuery-HTML5-CSS3实现的文本框.zip
作为html 和css 学习笔记 和 复习大纲
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
Css写透明文本框,无边界文本框Css写透明文本框,无边界文本框Css写透明文本框,无边界文本框Css写透明文本框,无边界文本框Css写透明文本框,无边界文本框Css写透明文本框,无边界文本框
该资源为HTML和CSS自学笔记,介绍了HTML基本标签及其使用,另有CSS基础部分,含有CSS特性、文字、背景、盒子模型、浮动、定位、动画、2 D和3 D等知识,足供初学者实现静态页面等基础
clip样式实现炫酷简单CSS动画特效----RGB走马灯边框线 直接复制可用 新手练习可用
个人css学习笔记 精华版 个人css学习笔记 精华版