边框

边框

Border

Code示例1：

div{
    border:10px dotted rgha(255,0,0,0);
}

1. 粗细
   1px
2. 样子
   solid 实线
   dashed 虚线
   dotted 点画线（不同浏览器显示的不一样）
3. 颜色
   red 颜色的英文单词
   #f00 16进制
   rgb(255,0,0) rgb的表示
   rgba(255,0,0,0.5) rgba的表示(CSS3内容)
4. 设置样式
   • 复合样式（三个值合起来） border:10px dotted rgha(255,0,0,0);
   • 单一 样式

一个值：

div{
    <!-- width style color -->
    border-width:1px;
    border-style:solid;
    border-color:red;
}

四个值：

div{
    <!-- 上 右 下 左 -->
    border-width:1px 2px 3px 4px;
    border-style:solid dashed dotted solid;
    border-color:red green blue black;
}

两个值：

div{
    <!-- 上下 左右 -->
    border-width:1px 2px;
    border-style:solid dashed;
    border-color:red green;
}

三个值：

div{
    <!-- 上 左右 下 -->
    border-width:1px 2px 3px;
    border-style:solid dashed dotted;
    border-color:red green black;
}

div{
    <!-- top right bottom left -->
    border:1px solid red;
    border-top:3px solid green;<!-- 覆盖以前的效果 -->
    border-bottom-width:10px;<!-- 覆盖一个属性 -->
}

5. 特征
   边框是一个非矩形

div{
    <!-- 实现倒三角 -->
    width:0px;
    height:0px;
    border:20px solid #fff;
    border-top-color:blue;
}

打赏

微信扫一扫，打赏作者吧～