可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别用于上、右、下和左边框的样式

如果给出一个值,它将被运用到各边上。

如果两个或三个值给出了,省略了的值与对边相等

也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格

各边的风格使用的属性值
none:没有边框,无论边框宽度设置为多大
dotted:点线式边框
dashed:破折线式边框
solid:直线式边框
double:双线式边框
groove:槽线式边框
ridge:脊线式边框
inset:内嵌效果的边框
outset:突起效果的边框

 <!--
 可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别用于上、右、下和左边框的样式

 如果给出一个值,它将被运用到各边上。

 如果两个或三个值给出了,省略了的值与对边相等

 也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格

 各边的风格使用的属性值
 none:没有边框,无论边框宽度设置为多大
 dotted:点线式边框
 dashed:破折线式边框
 solid:直线式边框
 double:双线式边框
 groove:槽线式边框
 ridge:脊线式边框
 inset:内嵌效果的边框
 outset:突起效果的边框
 -->
 <!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" />
 <title>边框风格属性</title>
 <style>
     h1{
         border-style:solid;
         border-width:10px 20px 30px 40px;
         border-color:red blue yellow green;
     }
     h2{
         border-style:double solid inset dotted;
     }
     h3{
         border-top-style:solid;
         border-bottom-style:outset;
     }
 </style>
 </head>

 <body>
     <h1>wwwwwwwwwwwwwwwww</h1>
     <h2>wwwwwwwwwwwwwwwww</h2>
     <h3>wwwwwwwwwwwwwwwww</h3>
 </body>
 </html>

HTML中的边框属性的更多相关文章

  1. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  2. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  3. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  4. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  7. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  8. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

  9. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

随机推荐

  1. Qt之Timers

    简述 QObject是所有Qt objects的基类,在Qt中提供了基础定时器的支持.使用QObject::startTimer(),你可以传递一个毫秒数间隔作为参数启动一个定时器.该函数返回一个唯一 ...

  2. Go语言并发与并行学习笔记(三)

    转:http://blog.csdn.net/kjfcpua/article/details/18265475 Go语言并发的设计模式和应用场景 以下设计模式和应用场景来自Google IO上的关于G ...

  3. CentOS hadoop配置错误Incorrect configuration: namenode address dfs.namenode.servicerpc-address ...

    # ./sbin/start-all.sh                     This script is Deprecated. Instead use start-dfs.sh and st ...

  4. 使用System.Timers.Timer类实现程序定时执行

    使用System.Timers.Timer类实现程序定时执行 在C#里关于定时器类有3个:System.Windows.Forms.Timer类.System.Threading.Timer类和Sys ...

  5. HDU 2795 单点更新,区间优先查找(想法)

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. C# JObject解析Json(多方法解析Json 二)

    下载Newtonsoft.Json,添加引用 记得using Newtonsoft.Json.Linq; //用JObject解析 string json = "{\"offlin ...

  7. 3.5缺少动态连接库.so--cannot open shared object file: No such file or directory

    总结下来主要有3种方法:1. 用ln将需要的so文件链接到/usr/lib或者/lib这两个默认的目录下边 ln -s /where/you/install/lib/*.so /usr/lib sud ...

  8. Java中的深拷贝和浅拷贝

    1.浅拷贝与深拷贝概念 (1)浅拷贝(浅克隆) 浅拷贝又叫浅复制,将对象中的所有字段复制到新的对象(副本)中.其中,值类型字段(java中8中原始类型)的值被复制到副本中后,在副本中的修改不会影响到源 ...

  9. poj1274 二分匹配

    今天复习二分匹配,A 了一道模板题. 二分匹配需要理解增广路的寻找.用dfs来更新最大匹配.注意一些点:赋初值:愚蠢地把==写成了= ; 然后match的记值;每个点都要重新走一遍. #include ...

  10. Redhat6.x下如何制作虚拟机快照和镜像封装

    一.虚拟机快照 1.确认你的物理机上的vg还有足够的剩余空间 [root@hacker ~]# vgs  VG        #PV #LV #SN Attr   VSize  VFree   vg_ ...