|
1.border 边框简介：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 50px;
height: 50px;
/*边框*/
border-top: 20px solid yellow;
border-right: 20px solid blue;
border-bottom: 20px solid red;
border-left: 20px solid green;
/*内容区域颜色*/
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2.利用border画出小三角：注不要设置宽，高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 0px;
height: 0px;
/*background-color: orange;*/
transform: rotate(-45deg);
border-top: 20px solid transparent;
border-left: 20px solid blue;
}
.box:hover {
/* 鼠标悬浮时样式 */
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
</script>
</body>
</html>
| 
转播
