首页 > 代码库 > html页面边框的另一种写法
html页面边框的另一种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
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;
/*单独对下边框颜色进行复制*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到
html页面边框的另一种写法