css美化Div边框的样式实例

   今天工作干完了,想到前几天一个CSS新手让我帮他美化一下他的Div边框,索引想到不如写一个CSs小教程 ,帮助更多的CSs新手学会以如何用CSS来美化网页上的边框,不只是Div,其实其它元素的美化方法和Div是一样的,下面以美化Div边框为例做介绍。

  先来写一个美化边框的CSS代码:

  border:1px solid #96c2f1;background:#eff7ff

  将这段CSS代码应用在Div上,产生边框效果,代码如下:

    <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff">&nbsp;border:1px solid     #96c2f1;background:#eff7ff</div>  border:1px solid #96c2f1;background:#eff7ff

  生效后效果如下:

  border:1px solid #96c2f1;background:#eff7ff

  下面再节选几个已经美化好的Div边框样式,可根据自己的网页风格选择使用:

  border:1px solid #9bdf70;background:#f0fbeb

  border:1px solid #bbe1f1;background:#eefaff

  border:1px solid #cceff5;background:#fafcfd

  border:1px solid #ffcc00;background:#fffff7

  border:1px solid #cee3e9;background:#f1f7f9

  border:1px solid #a9c9e2;background:#e8f5fe

  border:1px solid #e3e197;background:#ffffdd

  border:1px solid #adcd3c;background:#f2fddb

  border:1px solid #bfd1eb;background:#f3faff

  border:1px solid #a5b6c8;background:#eef3f7

时间: 2024-11-17 19:15:35

css美化Div边框的样式实例的相关文章

css 定义 div边框代码

 代码如下 复制代码 <title>css 定义 div边框代码</title> <style type="text/css">  .111cn_net {  BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; WIDTH: 300px; LINE-HEIGHT: 104px;

css定义div里面class样式

好了下面我们就来看一个例子吧. .top_menu{ background-color:#3399cc; text-align:left; height:18px; margin-top:1px; margin-bottom:6px; padding-top:6px; padding-bottom:4px; padding-left:2px;} .top_menu a,.top_menu a:visited{padding-left:2px; color:#000000;} 现在我们看到的是类t

CSS 美化表格边框为凹陷立体效果的实现方法_典型特效

AJAX专栏 FW专栏 FLASH专栏 此边框为默认风格 AJAX专栏 FW专栏 FLASH专栏 此边框为凹陷效果

使用CSS处理表格边框样式化

css 在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据. 显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用CSS对表格边框进行样式化的方法. 链接 CSS2表格模型是基于HTML 4.01表格模型的.表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:表格.锚.数据行.数据行组.数据列.数据列组和单元格.这篇文章将集中讲解表格中各个元素的边框处理方法. 边框 根据不同的

使用CSS改变表格边框样式

css 用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到<body>~</body>里,此为隐藏下边框 <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-bottom-width: 0" bordercolor="#111111&

怎样用css美化表格的边框

我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框. 有关表格边框的css语法 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标签等. 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thi

实例讲解使用CSS实现多边框和透明边框的方法

  CSS多边框 Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样.不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟.不过,WG显然忘记了在 CSS 代码中灵活地调整边框,才是我们需要的,现在开发者只能使用一些Hack手段来模拟多重边框,比如使用多重元素的嵌套来模拟多重边框.现在,我将告诉你一些更优秀的方法,无需使用多余的标签即可实现多重

Jquery使用css方法改变样式实例

  本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

Jquery使用css方法改变样式实例_jquery

本文实例讲述了Jquery使用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"> &