border(边框)是盒模型的组成之一，在开发中有许多实际小用法，跟着动手练练吧。
1.border简写属性的构成
- border-width：规定边框的宽度；
- border-style：规定边框的样式；
- border-color：规定边框的颜色；
2.用border实现三角形的效果
简单的demo如下：
<!DOCTYPE html>
效果图：
- 那如何成为一个三角形呢？ 只需要给其中三个边的颜色设置成透明（transparent）即可。效果图如下：
- 我不想要90°的三角形，咋做呢？ 只需要修改bordr-width的值即可。
简单的demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* 给标签初始宽高设置为0 */
width: 0;
height: 0;
/* 给四个边分开写样式 */
border-top: 70px solid red;
border-right: 40px solid green;
border-bottom: 100px solid yellow;
border-left: 100px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图如下：
有种喜欢叫关注，关注点赞不迷路~~~
2890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
