html边框边上带字,html页面边框的另一种写法

边框

div{

width: 300px;

height: 300px;

/*border: 1px solid red; 复合样式*/

/*单一样式*/

border-width: 1px 2px 3px 4px;

border-style: solid dashed dotted solid;

border-color: red blue black pink;

/*四个值依次分别对上、右、下、左赋值*/

/*当只有两个值时一次分别对上/下、左/右赋值*/

/*当放三个值时依次分别对上、左/右、下赋值*/

border-top: 10px solid yellow;

/*单独对上边框进行赋值，

border-bottom为下边框

border-left为左边框

border-right为右边框

* */

border-bottom-color: hotpink;

/*单独对下边框颜色进行复制*/

}

注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到