边框、圆角、盒子阴影

边框border

三要素

/* 线宽度 线型 线颜色 */
border: 1px solid red;
线型：solid实线;dashed虚线;dotted点状线

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

四个方向边框

属性	意义
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

小属性
例：border-top-width

去掉边框

例：border-left:none;去掉左边框

应用：制作三角形

.box1 {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: red;
}
.box2 {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: red;
}
<div class="box1"></div>
<div class="box2"></div>

圆角border-radius

属性值单位：px、百分比

border-radius: 20%;

属性值：圆角的半径

四个方向圆角

border-radius: 10px 20px 30px 40px;

小属性	意义
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角

圆和椭圆

圆：正方形盒子设置border-radius: 50%;
椭圆：长方形盒子设置border-radius：50%

盒子阴影 box-shadow

 box-shadow: 1px 2px 3px rgba(0, 0, 0, .4);
 /* x偏移 y偏移 模糊量 颜色 */

阴影延展

box-shadow: 1px 2px 3px 4px rgba(0, 0, 0, .4);
/* x偏移 y偏移 模糊量 阴影延展 颜色 */

内阴影

 box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, .4);
 /* 内阴影 x偏移 y偏移 模糊量 阴影延展 颜色 */

多阴影

多个属性值用逗号隔开

box-shadow: 1px 2px 3px red, 1px 2px 3px blue, 1px 2px 3px green;