css基础教程之边框背景

一、border

1.border：<line-width> || <line-style> || <color>

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

.box{
    border:1px solid #eee;
  }

2.属性拆分

    border-width:1px
    border-style:solid;
    border-color:#eee;

3.方向拆分

border-top

border-right

border-bottom

border-left

二、边框圆角 border-radius

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

  .box{
    border:1px solid #eee;
    border-radius:5px;
    border-radius: 5px/10px;
  }

方向拆分

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

三、阴影 box-shadow

none：无阴影

<length>①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧

<length>②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部

<length>③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值

<length>④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩

<color>：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色

inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影

  .box{
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
  }

四、背景 background

由于背景参数较多所以推荐大家使用拆分背景属性

1、background-image 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”

    .box{
      background-image:url(bg.jpg);    
    }

2.background-position 指定背景图像在元素中出现的位置。

<percentage> 百分比

<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。

center 背景图像横向或纵向居中。

left 背景图像从元素左边开始出现。

right 背景图像从元素右边开始出现。

top 背景图像从元素顶部开始出现。

bottom 背景图像从元素底部开始出现。

    div{
      background-position: -68px -34px;
      background-position: center;
    }

background-size 指定背景图像尺寸。

<percentage> 百分比

<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。

auto 背景图像的真实大小。

cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    div{
       background-size:100px 140px;
       background-size:cover;
    }

background-repeat 指定背景图像如何填充。

repeat-x 背景图像在横向上平铺

repeat-y 背景图像在纵向上平铺

repeat 背景图像在横向和纵向平铺

no-repeat 背景图像不平铺

round 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）

space 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）

    div{
      background-repeat: no-repeat;
    }

background-attachment 定义滚动时背景图像相对于谁固定。

fixed 背景图像相对于视口（viewport）固定。

scroll 背景图像相对于元素固定,默认

    div{
      background-attachment: fixed;
    }

background-origin 指定背景图像从元素的哪个区域作为显示的原点。

border-box 从border区域（含border）开始显示背景图像。

padding-box 默认值，从padding区域（含padding）开始显示背景图像。

content-box 从content区域开始显示背景图像。

    div{
      background-origin:border-box;
    }

background-clip 指定背景图像向外裁剪的区域。

border-box 默认值从border区域（含border）开始向外裁剪背景。

padding-box 从padding区域（含padding）开始向外裁剪背景。

content-box 从content区域开始向外裁剪背景。

    div{
      background-clip:content-box;
    }

background-color 指定背景颜色

    div{
      background-color: #808080;
    }