1. CSS 边框(border)实例：
    元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
  2.  
  3. CSS border 属性允许你规定元素边框的样式、宽度和颜色。
  4.  
  5. CSS 边框属性
    属性 描述
    border 简写属性，用于把针对四个边的属性设置在一个声明。
    border-style   用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
    border-width   简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
    border-color   简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
    border-bottom  简写属性，用于把下边框的所有属性设置到一个声明中。
    border-bottom-color    设置元素的下边框的颜色。
    border-bottom-style    设置元素的下边框的样式。
    border-bottom-width    设置元素的下边框的宽度。
    border-left    简写属性，用于把左边框的所有属性设置到一个声明中。
    border-left-color  设置元素的左边框的颜色。
    border-left-style  设置元素的左边框的样式。
    border-left-width  设置元素的左边框的宽度。
    border-right   简写属性，用于把右边框的所有属性设置到一个声明中。
    border-right-color 设置元素的右边框的颜色。
    border-right-style 设置元素的右边框的样式。
    border-right-width 设置元素的右边框的宽度。
    border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
    border-top-color   设置元素的上边框的颜色。
    border-top-style   设置元素的上边框的样式。
    border-top-width   设置元素的上边框的宽度。
  6.  
  7. ##################
  8.  
  9. 定义和用法
    border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
  10.  
  11. 只有当这个值不是 none 时边框才可能出现。
  12.  
  13. 例子 1
    border-style:dotted solid double dashed;
    上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线
    ####################
    可能的值
    值  描述
    none   定义无边框。
    hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
    dotted 定义点状边框。在大多数浏览器中呈现为实线。
    dashed 定义虚线。在大多数浏览器中呈现为实线。
    solid  定义实线。
    double 定义双线。双线的宽度等于 border-width 的值。
    groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
    ridge  定义 3D 垄状边框。其效果取决于 border-color 的值。
    inset  定义 3D inset 边框。其效果取决于 border-color 的值。
    outset 定义 3D outset 边框。其效果取决于 border-color 的值。
    inherit    规定应该从父元素继承边框样式。
    ##########################
  14.  
  15. 1.所有边框属性在一个声明之中
    本例演示用简写属性来将所有四个边框属性设置于同一声明中。
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            p{border:medium double rgb(250,0,255)}
        </style>
    </head>
    <body>
  16.  
  17. <p>Some text</p>
    </body>
  18.  
  19. 2.设置四边框样式
    本例演示如何设置四边框样式。
        <style type="text/css">
            p.dotted {border-style:dotted}
            p.dashed {border-style:dashed}
            p.solid {border-style:solid}
            p.double {border-style:double}
            p.groove {border-style: groove}
            p.ridge {
                border-style: ridge;}
            p.inset {border-style: outset}
        </style>
    </head>
    <body>
    <p class="dotted">A dotted border</p>
  20.  
  21. <p class="dashed">A dashed border</p>
  22.  
  23. <p class="solid">A solid border</p>
  24.  
  25. <p class="double">A double border</p>
  26.  
  27. <p class="groove">A groove border</p>
  28.  
  29. <p class="ridge">A ridge border</p>
  30.  
  31. <p class="inset">An inset border</p>
  32.  
  33. <p class="outset">An outset border</p>
    </body>
  34.  
  35. 3.设置每一边的不同边框
    本例演示如何在元素的各边设置不同的边框。
        <style class="text/css">
            p.soliddouble {border-style: solid double}
            p.doublesolid {border-style: double solid}
            p.groovedouble {border-style:groove double}
            p.three {vorder-style:solid double groove}
        </style>
    </head>
    <body>
    <p class="soliddouble">Some text</p>
    <P class="doublesolid">Some text</P>
    <p class="groovedouble">Some text</p>
    <p class="three">Some text</p>
    </body>
  36.  
  37. 4.所有边框宽度属性在一个声明之中
    本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
        <style type="text/css">
            p.one{border-style: solid;border-width: 5px;}
            p.two{border-style:solid;border-width:thick}
            p.three{border-style:solid;border-width:5px 10px}
            p.four{border-style:solid;border-width:5px 10px 1px}
            p.five{border-style: solid;border-width:5px 10px 1px medium}
        </style>
    </head>
    <body>
    <p class="one"> Some text</p>
    <p class="two"> Some text</p>
    <p class="three"> Some text</p>
    <p class="four">Some text</p>
    <p class="five">Some text</p>
  38.  
  39. </body>
  40.  
  41. 5.设置四个边框的颜色
    本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
        <style type="text/css">
            p.one {border-style:solid;
                border-color: #0000ff;}
            p.two{border-style:solid;border-color: #ff0000 #0000ff}
            p.three{border-style:solid;border-color:#ff0000 #0000ff #00ff00}
            p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255)}
        </style>
    </head>
    <body>
    <p class="one">Some text</p>
    <p class="two"> Some text</p>
    <p class="three"> Some text</p>
    <p class="four">Some text</p>
    </body>
  42.  
  43. 6.所有下边框属性在一个声明中
    本例演示用简写属性来将所有下边框属性设置在同一声明中。
        <style type="text/css">
            p{border-style:solid;border-bottom:thick dotted #ff0000}
  44.  
  45.     </style>
    </head>
    <body>
    <p>This is some test</p>
    </body>
  46.  
  47. 7.设置下边框的颜色
    本例演示如何设置下边框的颜色。
        <style type="text/css">
            p{border-style:solid;border-bottom-color:#ff0000}
        </style>
    </head>
    <body>
    <p>This is some text in a paragraph.</p>
  48.  
  49. 8.设置下边框的样式
    本例演示如何设置下边框的样式。
        <title>Title</title>
        <style type="text/css">
            p {border-style:solid}
            p.none {border-bottom-style:none}
            p.dotted {border-bottom-style:dotted}
            p.dashed {border-bottom-style:dashed}
            p.solid {border-bottom-style:solid}
            p.double {border-bottom-style:double}
            p.groove {border-bottom-style:groove}
            p.ridge {border-bottom-style:ridge}
            p.inset {border-bottom-style:inset}
            p.outset {border-bottom-style:outset}
        </style>
    </head>
    <body>
  50.  
  51. <p class="none">No bottom border.</p>
    <p class="dotted">A dotted bottom border.</p>
    <p class="dashed">A dashed bottom border.</p>
    <p class="solid">A solid bottom border.</p>
    <p class="double">A double bottom border.</p>
    <p class="groove">A groove bottom border.</p>
    <p class="ridge">A ridge bottom border.</p>
    <p class="inset">An inset bottom border.</p>
    <p class="outset">An outset bottom border.</p>
    </body>
    9.设置下边框的宽度
    本例演示如何设置下边框的宽度。
        <style type="text/css">
            p.one{border-style: solid;border-bottom-width:15px}
            p.two{border-style:solid;border-bottom-width:thin}
        </style>
    </head>
    <body>
    <p class="one"><b>注释</b>“border-nottom-widt” 属性如果单独使用得话是不会起作用的。请首先使用"border-style" 属性来设置边框</p>
    <p class="two">Some text.</p>
    </body>
  52.  
  53. 10.所有左边框属性在一个声明之中
    所有左边框属性在一个声明之中
        <style type="text/css">
            p{border-style:solid;border-left:thick double #ff0000;}
        </style>
    </head>
    <body>
    <P>This is some text</P>
    </body>
  54.  
  55. 11.设置左边框的颜色
    本例演示如何设置左边框的颜色。
  56.  
  57.     <style type="text/css">
            p{border-style:solid;border-left-color: #ff0000}
        </style>
    </head>
    <body>
    <p>some text.</p>
    </body>
  58.  
  59. 12.设置左边框的样式
    本例演示如何设置左边框的样式。
        <style type="text/css">
        p
        {
        border-style:solid;
        }
        p.none {border-left-style:none}
        p.dotted {border-left-style:dotted}
        p.dashed {border-left-style:dashed}
        p.solid {border-left-style:solid}
        p.double {border-left-style:double}
        p.groove {border-left-style:groove}
        p.ridge {border-left-style:ridge}
        p.inset {border-left-style:inset}
        p.outset {border-left-style:outset}
        </style>
    </head>
  60.  
  61. <body>
    <p class="none">No left border.</p>
    <p class="dotted">A dotted left border.</p>
    <p class="dashed">A dashed left border.</p>
    <p class="solid">A solid left border.</p>
    <p class="double">A double left border.</p>
    <p class="groove">A groove left border.</p>
    <p class="ridge">A ridge left border.</p>
    <p class="inset">An inset left border.</p>
    <p class="outset">An outset left border.</p>
    </body>
  62.  
  63. 13.设置左边框的宽度
    本例演示如何设置左边框的宽度。
  64.  
  65.     <style type="text/css">
            p.one{border-style:solid;border-left-width:15px}
            p.two{border-style:solid;border-left-width:thin}
        </style>
    </head>
    <body>
    <p class="one"><b>注释：</b>"border-left-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    <p class="two">Some text. Some more text.</p>
  66.  
  67. 14.所有右边框属性在一个声明之中
    本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。
        <style type="text/css">
            p {border-style:solid;border-right:thick double #ff0000;}
        </style>
    </head>
    <body>
    <p>This is some text </p>
    </body>
  68.  
  69. 15.设置右边框的颜色
    本例演示如何设置右边框的颜色。
  70.  
  71.     <style type="text/css">
            p{border-style:solid;border-right-color:#ff0000}
        </style>
    </head>
    <body>
    <p>Some text.</p>
    </body>
  72.  
  73. 16.设置右边框的样式
    本例演示如何设置右边框的样式。
    <style type="text/css">
    p.dotted {border-right-style: dotted}
    p.dashed {border-right-style: dashed}
    p.solid {border-right-style: solid}
    p.double {border-right-style: double}
    p.groove {border-right-style: groove}
    p.ridge {border-right-style: ridge}
    p.inset {border-right-style: inset}
    p.outset {border-right-style: outset}
    </style>
    </head>
  74.  
  75. <body>
    <p class="dotted">A dotted border</p>
  76.  
  77. <p class="dashed">A dashed border</p>
  78.  
  79. <p class="solid">A solid border</p>
  80.  
  81. <p class="double">A double border</p>
  82.  
  83. <p class="groove">A groove border</p>
  84.  
  85. <p class="ridge">A ridge border</p>
  86.  
  87. <p class="inset">An inset border</p>
  88.  
  89. <p class="outset">An outset border</p>
  90.  
  91. 17.设置右边框的宽度
    本例演示如何设置右边框的宽度。
  92.  
  93.     <title>Title</title>
        <style type="text/css">
            p.one {border-style:solid;border-right-width:15px}
            p.two{border-style:solid;border-right-width:thin}
        </style>
    </head>
    <body>
    <p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    <p class="two">Some text. Some more text.</p>
    18.所有上边框属性在一个声明之中
    本例演示用简写属性来将所有上边框属性设置于同一声明之中。
  94.  
  95. p
    {
    border-style:solid;
    border-top:thick double #ff0000;
    }
    </style>
    </head>
  96.  
  97. <body>
    <p>This is some text in a paragraph.</p>
    </body>
  98.  
  99. 19.设置上边框的颜色
    本例演示如何设置上边框的颜色。
        <style type="text/css">
            p.one {border-style:solid;border-right-width:15px}
            p.two{border-style:solid;border-right-width:thin}
        </style>
    </head>
    <body>
    <p class="one"><b>注释：</b>"border-right-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    <p class="two">Some text. Some more text.</p>
  100.  
  101. 20.设置上边框的样式
    本例演示如何设置上边框的样式。
    <style type="text/css">
    p
    {
    border-style:solid;
    }
    p.none {border-top-style:none}
    p.dotted {border-top-style:dotted}
    p.dashed {border-top-style:dashed}
    p.solid {border-top-style:solid}
    p.double {border-top-style:double}
    p.groove {border-top-style:groove}
    p.ridge {border-top-style:ridge}
    p.inset {border-top-style:inset}
    p.outset {border-top-style:outset}
    </style>
    </head>
  102.  
  103. <body>
    <p class="none">No top border.</p>
    <p class="dotted">A dotted top border.</p>
    <p class="dashed">A dashed top border.</p>
    <p class="solid">A solid top border.</p>
    <p class="double">A double top border.</p>
    <p class="groove">A groove top border.</p>
    <p class="ridge">A ridge top border.</p>
    <p class="inset">An inset top border.</p>
    <p class="outset">An outset top border.</p>
    </body>
  104.  
  105. 21.设置上边框的宽度
    本例演示如何设置上边框的宽度。
  106.  
  107. <style type="text/css">
    p.one 
    {
    border-style: solid;
    border-top-width: 15px
    }
    p.two 
    {
    border-style: solid;
    border-top-width: thin
    }
    </style>
    </head>
  108.  
  109. <body>
    <p class="one"><b>注释：</b>"border-top-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
    <p class="two">Some text. Some more text.</p>
    </body>

CSS 边框(border)实例的更多相关文章

  1. W3School-CSS 边框(border)实例

    CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...

  2. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  3. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  4. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  5. CSS 边框

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值: ...

  6. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  7. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  8. html5--6-40 CSS边框

    html5--6-40 CSS边框 实例 div动态阴影 学习要点 掌握CSS边框属性的使用 元素的边框就是围绕元素内容和内边距的一条或多条线. 元素的边框属性: border 简写属性,用于把针对四 ...

  9. CSS：CSS 边框

    ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border ...

随机推荐

  1. chrome新版打开新标签页自动打开谷歌主页

    最近更新了chrome,发现新版有个问题. 打开标签页时会自动跳转至 https://www.google.com/webhp?ie=UTF-8&gws_rd=cr&rct=j 导致我 ...

  2. C#检测本机是否联网

    public class Net { [DllImport("wininet")] private extern static bool InternetGetConnectedS ...

  3. 如何用vmware workstation来做虚拟化实验

    前言 以前做用vmare只是简单的实验,但是随着现在虚拟化的兴起,我们的开始要开始虚拟化的实验了. 我们看到有些windows 2012的书上面说用hyper-v来实验,但是hyper-v只能做一些列 ...

  4. webrtc 实时视频 .net websocket信令服务器

    这篇文章主要参考了 Webrtc WebSocket实现音视频通讯,非常感谢提供代码 前端部分完全是从这篇文章复制过来的,只是修改了webscket的url,还有加入了webrtc-adapterjs ...

  5. Apache的配置详解 带图

    对Apache 的 Http.conf 各项配置详解 1.01 ServerRoot 配置 [ServerRoot "" 主要用于指定 Apache 的安装路径,此选项参数值在安装 ...

  6. redis慢查询日志的配置和查看

    Redis是单线程运行的,一个慢执行,会让后续的大量执行延时,吞吐量也会极大的降低.记录.查询.监控Redis慢执行意义重大.Redis的slowlog只记录在内存中,效率很高,不用过于担心影响性能. ...

  7. Axios发送请求时params和data的区别

    在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然. 因为params是添加到url的请求字符串中的,用于get请求. 而data是添加到请求体(body) ...

  8. android Application Component研究之Activity(二)

    http://blog.csdn.net/windskier/article/details/7172710 本文为原创文章,欢迎转载!转载时请注明出处:http://blog.csdn.net/wi ...

  9. mysql排序索引优化

    为排序使用索引 KEY a_b_c (a,b,c) order by 能使用索引最左前缀 -order by a -order by a,b -order by a,b,c -order by a d ...

  10. 整数划分 NBUT - 1046

    题目很简单,把一个正整数分割成N个正整数之和.但是你得把所有的划分方法列出来,以字典序升序排序.对于每种划分方法,小的数字在前面. 思路:直接深度优先搜索,注意要判断前一位一定会比将要放入答案的因子小 ...