边框圆角与盒子阴影

边框

边框的三要素

• border 属性

border: 1px solid red //  线宽度 线型  线颜色 ;

• 线型

1. solid 实线
2. dashed 虚线
3. dotted 点状线

• 边框的三要素可以拆分为小属性

1. border-width 线宽
2. border-style 线型
3. border-color 线颜色

四个方向的边框

border-top //上边框
......

• 同样，四个方向边框的三要素也可以拆分为小属性

border-top-width //上边框宽度
border-top-style //上边框线型
......

• 去掉边框

border-left: none // 属性即可以去掉左边框，以此类推;; ; ;

• 利用边框制作三角形

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

• 在给表格加边框时,消除边框之间的缝隙:

  table {
    border-collapse: collapse;
  }
  

圆角

border-radius 属性

border-radius 属性的值通常为 px 单位。表示圆角的半径。

border-radius: 10px;

单独设置四个圆角

border-radius: 10px 20px 30px 40px // 左上 右上 右下 左下 ;

也可以利用小属性单独设置四个圆角

border-top-left-radius //左上角

百分比为单位

border-radius 属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里。

正圆形

border-radius: 50%;

盒子阴影

box-shadow 属性

box-shadow 属性用来实现盒子的阴影

box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.4);
// x偏移，y偏移，模糊量，颜色

阴影延展

box-shadow: 10px 20px 30px 40px rgba(0, 0, 0, 0.4);

内阴影

box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, 0.4);

多阴影

box-shadow 属性值可以用逗号隔开多个，表示携带多个阴影

box-shadow: 10px 20px 30px 40px blue, 10px 20px 100px 40px green;