可以通过边框风格属性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：突起效果的边框

  1.  <!--
  2.  可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别用于上、右、下和左边框的样式
  3.  
  4.  如果给出一个值，它将被运用到各边上。
  5.  
  6.  如果两个或三个值给出了，省略了的值与对边相等
  7.  
  8.  也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格
  9.  
  10.  各边的风格使用的属性值
  11.  none：没有边框，无论边框宽度设置为多大
  12.  dotted：点线式边框
  13.  dashed：破折线式边框
  14.  solid：直线式边框
  15.  double：双线式边框
  16.  groove：槽线式边框
  17.  ridge：脊线式边框
  18.  inset：内嵌效果的边框
  19.  outset：突起效果的边框
  20.  -->
  21.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22.  <html xmlns="http://www.w3.org/1999/xhtml">
  23.  <head>
  24.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  25.  <title>边框风格属性</title>
  26.  <style>
  27.      h1{
  28.          border-style:solid;
  29.          border-width:10px 20px 30px 40px;
  30.          border-color:red blue yellow green;
  31.      }
  32.      h2{
  33.          border-style:double solid inset dotted;
  34.      }
  35.      h3{
  36.          border-top-style:solid;
  37.          border-bottom-style:outset;
  38.      }
  39.  </style>
  40.  </head>
  41.  
  42.  <body>
  43.      <h1>wwwwwwwwwwwwwwwww</h1>
  44.      <h2>wwwwwwwwwwwwwwwww</h2>
  45.      <h3>wwwwwwwwwwwwwwwww</h3>
  46.  </body>
  47.  </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. border用处多

    1. 使用border属性实现梯形    给定一个div,通过设定div四个边框不同的颜色且设置比较粗的边框线条,可以看到div除了中间的content部分,四个边框均成梯形状,既然已经有了梯形的雏形 ...

  2. 杂记（编程style）----google code style！

    1.文件名 使用小写字母和下划线组合.头文件以.h结尾,定义文件用.cc结尾.例如:my_useful_class.cc 2.类型名 使用大写字母开头,多个单词组合时每个单词的首字母大写.例如:Url ...

  3. 初学java之触发响应事件

    import java.awt.*; import javax.swing.*; import java.awt.event.*; class WindowActionEvent extends JF ...

  4. Sumblime Text2安装Package Control两种方法+安装插件+注册码

    刚开始不认识sumblime的时候,就直接在网上下载了一个最新版的sumblime text3,只是在配合使用go语言时,出现了一些不为自己知道的奇葩问题,于是果断把3卸载了,改成了sumblime ...

  5. 权威第三方报告——获取IT产品竞争力信息的主要途径，类似你买电脑前上的xx论坛看实力评估

    Gartner is known for its huge influence on purchasing as well as an unequaled events business. Forre ...

  6. 亿级Web系统搭建——单机到分布式集群[转]

    当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...

  7. MySQL主从数据库同步

    更新中,还未测试.......

  8. hover用法

    $('.F_box_2').hover(            function(){ $(this).find(".make_reply").css({"color&q ...

  9. Adriod—— DVM

    Android 运行环境主要指的虚拟机技术——Dalvik.Android中的所有Java程序都是运行在Dalvik VM上的.Android上的每个程序都有自己的线程,DVM只执行.dex的Dalv ...

  10. c++ 普通高精减

    //c++ 普通高精减 //codevs 3115 高精度练习之减法 //内容简单,就不注释了. //注意下,&&优先级高于||. #include<cstdio>#inc ...