边框圆角 盒阴影

边框

1. 普通边框

   border:5px solid red; 
   border-bottom:30px solid red;
   border-top-color: red;
   

    - solid：实线	dotted：圆点线	dashed：虚线
    - border是对四条边的3个属性（width/style/color)进行设定，也可以指定一条边
   

2. 边框使用图片

   border:30px solid transparent;
   border-image:url("./border.png") 30 round;
   

    - 边框线形必须为实线，颜色无所谓
    - 30：角上的像素
    - round：边上重复且为整个的图案，若用repeat则不能保证为整个的图案
   

3. 用边框画三角形（利用边框斜切）
   • 左右边框颜色为透明transparent
   • 底边为任意颜色
   • 调整长度使编程三角形

圆角

1. 样式

   border-radius:10px;
   border-radius:10em;
   border-radius:10rem;
   border-radius:10vw;
   border-radius:50%;
   border-radius:10px 10px 10px 10px;
   border-radius:10px 20px 10px;
   border-radius:10px 20px;
   border-top-left-radius:10px;
   

   • 四个值 从左上 顺时针
   • 三个值 左上 右上和左下 右下
   • 两个值 左上和右下 右上和左下
   • border-top-left-radius 先上下 后左右

盒阴影

width:800px;
height:400px;
background:red;
margin:0 auto;
box-shadow:50px 30px 0 0 yellow inset;

- 横向 竖直 模糊区域 扩展 颜色 内阴影
- 阴影在外时模糊为外侧 阴影在内时模糊为内侧