CSS_边框样式

边框

• 四边
  • 属性名: border
  • 详细属性:
    • border-color: 边框颜色
    • border-width: 边框粗细 px
    • border-style: 边框风格
      • solid 实线, 常用
      • none 没线, 常用
      • double 双线
      • dashed 虚线
      • dotted 点线
  • 简写:
    border: [color] | [width] | style;

所有的简写, 一经使用, 所有省略的值都会采用默认值

• 单边

  • 属性名: border-方向
    • 方向值: top, bottom, left, right
  • 属性: color, width, style
  • border-方向-属性:
    • border-top-color: 顶部的颜色
    • border-top-style: 顶部的风格
    • border-left-width: 左侧的粗细
    • …
  • 简写:
    border-方向: [color] | [width] | style;

• 四边圆角:
  border-radius: px 或 %

• 单边圆角:
  border-上下-左右-radius: px 或 %

• 边框合并 (适合表格)
  border-collapse: collapse

• 轮廓:
  outline: none 取消轮廓
  outline:[color] | [width] | style;

<style>
        .box{
            width: 200px;
            height: 200px;
            border-color: red;
            border-width: 10px;
            border-style: solid;
            border-style: double;
            border-style: dashed;
            border-style: dotted;
            border: 5px solid blue;            
            border: solid;   
            border-left-width: 10px;
            border-top-color: green;   
        }
        input{
            border-left-style: none;      
            border-right-style: none;      
            border-top-style: none;   
            border-bottom-color: red;
            outline:red solid;
            outline: none;
        }
        .box2{
            width: 200px;
            height: 100px;
            border: 10px solid red;
            /* border-radius: 5px; */
            border-radius: 10%;
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
        }
        td,table{border:1px solid gray;}
        table{border-collapse: collapse;}
        tr:hover{background: #ccc;}
    </style>

<div class="box"></div>
    <br>
    <br>
    <br>
    <br>
    <input type="text">
    <br>
    <br>
    <br>
    <br>
    <div class="box2"></div>
    <br>
    <br>
    <br>
    <br>
	<table>
         <caption>最帅气的男星</caption>
         <tr>
             <td>Sheep</td>
             <td>Sheep</td>
             <td>Sheep</td>
         </tr>
         <tr>
             <td>Sheep</td>
             <td>Sheep</td>
             <td>Sheep</td>
         </tr>
         <tr>
             <td>Sheep</td>
             <td>Sheep</td>
             <td>Sheep</td>
         </tr>
     </table>