zoukankan      html  css  js  c++  java
  • css盒子模型之边框

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style type="text/css">
     7         .box{
     8             width:300px;
     9             height: 390px;
    10             background-color:pink;
    11              border-top-style:solid;/* 线型 */
    12             border-top-color:red;/* 上边框颜色 */
    13             border-top-width:5px;/* 上边框粗细 */
    14 
    15             border-bottom-style:dotted;/* 点线 */
    16             border-bottom-color:blue;
    17             border-left-style:dashed;/* 虚线 */
    18             border-left-color:#467890; 
    19             /* 四个边框都一样 */
    20             border:5px solid blue;
    21         }
    22     </style>
    23 </head>
    24 <body>
    25     <div class="box">距离</div>
    26 </body>
    27 </html>

    css盒子模型:
    1.边框 border
     border-top-style(线型):solid(实线)
                      dotted(点线)
                        dashed(虚线)
     border-top-color(边框颜色)
     border-top-width(边框粗细)

    2.边框属性简写:
     border-top:5px solid red;
     特点:没有顺序限制.线型为必写项
     四个边框相同的时候写法:
     border:5px solid red
     特点:没有顺序要求。线型为必写项

  • 相关阅读:
    GDUFE ACM-1020
    GDUFE ACM-1069(简单的巴什博弈)
    GDUFE ACM-1138
    GDUFE ACM-1009
    GDUFE ACM-1008
    GDUFE ACM-1005
    LCA 最近公共祖先
    51nod
    51nod
    51nod
  • 原文地址:https://www.cnblogs.com/twinkle-/p/9096673.html
Copyright © 2011-2022 走看看