整体介绍
边框 1)边框的三要素 2)四个方向的边框 圆角 盒子阴影 小慕医生项目开发
边框的三要素
border属性
border属性需要三个要素
线型
边框的三要素小属性
边框三要素可以拆分为小属性 方便层叠大属性
四个方向的边框
三要素小属性
同样用来层叠大属性
去掉边框
border-left:none;属性即可去掉左边框，以此类推
利用边框制作三角形
<style>
.box1{
width:100px;
height:100px;
border:20px solid #000
border-top:red;
}
</style>
斜线上方属于上边框，斜线下方为左右边框
改为：
<style>
.box1{
width:0;
height:0;
/*transparent是透明色*/
border:20px solid transparent;
border-top:red;
}
</style>即可制作三角形
圆角
border-radius属性
border-radius 属性的值通常为px单位，表示圆角的半径
可以用来制作圆形
border-radius的值等于其边长即可，注意是正方形边框
若是长方形边框，会形成胶囊型，而不是椭圆形，椭圆形需要使用百分比做单位，设置为50%即可
单独设置四个圆角
border-radius属性可以单独设置四个圆角
也可以使用小属性,也能层叠大属性
border-radius:40px; border-bottom-right-radius:0;
百分比做单位
border-radius,属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形和椭圆
正方形盒子如果设置的border-radius属性为50%，就是正 圆形
长方形盒子如果设置的border-radius属性为50%，就是椭 圆形
盒子阴影
box-shadow属性
阴影延展
延展值会向四周延展，就像控制中心投影点来控制影子大小
内阴影
box-shadow属性值前加inset单词，表示内阴影
多阴影
box-shadow属性值可以用逗号隔开多个，表示携带多个阴影
box-shadow:2px 2px 30px red, 4px 4px 40px blue, 6px 6px 50px green;