css3入门(5)边框，圆角及阴影

边框（三要素）

宽度

• border-width
• 单位是px

线型

• border-style
• solid实线
• dashed虚线
• dotted点状线

颜色

• border-color
• 就是普通的颜色
• transparent（透明色）

书写小属性的好处是可以层叠通用属性，用于调个别样式

四个方向的边框

• border-top
• border-right
• border-bottom
• border-left
• 也可有分别的小属性
  

去掉某方向边框

border-left：none；

用边框制作三角形

• 原理是边框是盒子高度宽度为0，只留下一边的边框
• 不能去掉边框，去掉就不会出现斜线了

圆角

• border-radius
  单位通常是px，表示圆角的半径
  
• 也可以用百分比为单位
  如果正方形设置50%就是正圆
  如果长方形设置50%就是椭圆

分别设置圆角

• border-radius：10px 20px 30px 40px
  左上 右上 右下 左下
• 也可以使用小属性，描述上下的在前，左右的在后
  

阴影

• box-shadow
• box-shadow：10px 20px 30px rgba(0,0,0,.4)
  ************** x偏移 y偏移 模糊量 颜色

延展值

• 如果在30px后面加一个值，他就会向四个方向延展

内阴影

• 在最前面加inset

多阴影

• 用逗号分隔接着写即可