边框

边框

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;<!-- 覆盖一个属性 -->
}
  1. 特征
    边框是一个非矩形
div{
<!-- 实现倒三角 -->
width:0px;
height:0px;
border:20px solid #fff;
border-top-color:blue;
}
打赏

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据