05 第五章 垂直对齐方式、背景background、CSS3圆

一、vertical-align:垂直对齐方式

定义行内元素的基线相对于该元素所在行的基线的垂直对齐。inline inline-block元素才具备此属性

• top 元素的顶端与行中最高元素的顶端对齐
• middle 此元素放置在父元素的中部。(小写x的中部)
• bottom 元素的顶端与行中最低的元素的顶端对齐。

以上值与 line-height 相关的

• text-top 元素的顶端与父元素字体的顶端对齐
• text-bottom 把元素的底端与父元素字体的底端对齐。
  baseline 默认。元素放置在父元素的基线上。

=>加vertical-align的同排元素都要vertical-align； =>vertical-align可以解决img下方间隙问题；

二.背景

• 背景颜色默认是从border-box开始绘制的

   *  默认值：background-clip:border-box;
  

• 如果要改变绘制区域的话可以使用

  *   background-clip:padding-box;
  *   background-clip:content-box;
  

image.png

background-color -背景颜色 background-image -背景图片 url(‘路径’); background-repeat -背景平铺

• no-repeat-不平铺
• repeat-x：x轴平铺
• repeat-y：y轴平铺

background-position :x y -背景位置

• X轴的值的值：
• 一、left左对齐 center水平居中 right右对齐
• 二、%
• 三、px
  Y轴的值:
• 一、top顶部对齐 center垂直居中 bottom底部对齐
• 二、%
• 三、px
  注意=>如果给一个值：第二个值默认center（50%）; 值：X轴的值 Y轴的值如果给的是方位值：可以颠倒

多背景及兼容
多背景：（用逗号分开）

• 先写的背景图片会盖住后写的背景图片

   background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
  

三.圆角 (border-radius)

border-radius：50%和100%一样，最多到50%；

分样式

• border-top-left-radius:
• border-top-right-radius:
• border-bottom-right-radius:
• border-bottom-left-radius:

复合样式=>border-radius 圆角：

• 四个值： 左上 右上 右下 左下
• 三个值： 左上 右上左下 右下
• 两个值： 左上右下 右上左下
• 一个值： 所有角一样的值
  单位： % px

box-shadow

1. box-shadow支持多个值,中间用逗号隔开.
   默认是外阴影 可以设置成inset 内阴影

• 支持负值

• 默认情况下阴影的颜色和盒子内容的颜色一致

   *  box-shadow:-10px -10px 10px red,
      10px 10px 30px red;
  

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
box-shadow: h-shadow v-shadow blur spread color inset;

 box-shadow: 10px 10px 10px 10px skyblue inset;

text-shadow

• text-shadow支持多个值,中间用逗号隔开.