CSS常见属性(边框属性)

边框属性:

border-style  border-width  border-color


border-style:

none(没有边框)  solid(实线边框)  dashed(虚线边框)  dotted(点状边框)  double(双线边框)  groove(凸槽边框)  ridge(垄状边框)  inset(inset边框)  outset (outset边框)  inherit(继承)

1.统一定义 ——  border-style:具体值;

例如:

.div0{

     border-style:none;

}

2.分别定义 —— border-方向-style:具体值;

例如:

.div1{

    border-top-style:solid;

    border-left-style:dashed;

    border-bottom-style:dotted;

    border-right-style:double;

}


border-width:

thin(细边框) medium(中等边框) thick(粗边框) px(自定义值)  inherit(继承)

1.统一定义 —— border-width:具体值;

例如:

.div2{

border-width:10px;

}

2.分别定义 —— border-方向-width:具体属性;

例如:

.div3{

border-style:solid;

border-top-width:thin;

border-left-width:medium;

border-bottom-width:thick;

border-right-width:10px;

}


border-color:

颜色值的名称    RGB    RGBA    16位进制  inherit(继承)

1.统一定义 —— border-color:具体值;

例如:

.div4{

border-style:solid;

bord-width:10px;

border-color:red;

}

2.分别定义 —— border-方向-color:具体值;

例如:

.div5{

border-style:solid;

border-width5;

border-top-color:orange;

border-left-color:blue;

border-bottom-color:yellow;

border-right-color:red;

}

3.简单定义 ——  border-color:具体值

一个值(上、下、左、右)/两个值(上下、左右)/三个值(上、(左右)、下)/四个值(上、右、下、左)

例如:

.div6{

border-style:solid;

border-width10px;

border-color:red green;

}

.div7{

border-style:solid;

border-width10px;

border-color:red green orange;

}

.div8{

border-style:solid;

border-width10px;

border-color:red green orange blue;

}


总结:

边框属性有一种简写方式 —— border:style  width color;

例如:

.div9{

border:double 10px blue;

}

待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,104评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,821评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,067评论 1 4
  • 来到橙子学院为我带来新鲜感,在这里遇见一群充满活力、搞怪开心的小伙伴,给我这个静静的人带来不一样的世界。 来到橙子...
    绚丽风景阅读 355评论 0 0