第十九天学习-阴影

CSS3

阴影

1、盒子阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）

h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。  必需    单位： px

v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。   必需   单位： px

blur：阴影模糊度，不能取负数。 可选    单位： px

spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选    单位： px

inset：表示添加内阴影，默认为外阴影。可选  

    box-shadow: 0 0 20px 10px green inset;

当 spread 为0时，阴影大小与元素大小相同。

 .box1 {

            background-color: yellow;

            /* 多个阴影 */

            /* 盒子阴影 */

            box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;

        }

> 可以在一个元素上设置一个或多个阴影，阴影之间用逗号隔开

2、文字阴影

语法

text-shadow: h-shadow v-shadow blur color;

text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;

h-shadow 必需，水平阴影的位置，允许负值；

v-shadow 必需，垂直阴影的位置，允许负值；

blur 可选，模糊距离；

color 可选，阴影的颜色；

.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

> 可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开

2、背景

2.1 多背景

background-image: url(图片路径), url(图片路径);

- 不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）

- 书写顺序越靠前，显示越靠上

  - 单独定义

  .box {

  background-image: url(img_flwr.gif), url(paper.gif);

  background-position: right bottom, left top;

  background-repeat: no-repeat, repeat;

  }

  - 简写

  .box {

  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

  }

 2.2 背景图尺寸设置

- background-size: 数值

  * px：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个 值会被设置为 “auto”。

  * percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如 果只设置一个值，则第二个值会被设置为 “auto”。

  * cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）

  * contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）

 .wrap div {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            margin: 5px;

        }

        /* 显示越靠前的背景，书写顺序越靠前 */

        .wrap .box {

            background-image: url(./img/bg1.jpg), url(./img/yd.jpg);

        }

        .wrap .box1 {

            background: url(./img/bg1.jpg), url(./img/7.jpg);

        }

        .wrap .box2 {

            background: url(./img/bg1.jpg) no-repeat, url(./img/7.jpg) no-repeat;

        }

        /* background-size: 数值 */

        /* px */

        .wrap .box3 {

            background: url(./img/yd.jpg) no-repeat;

            background-size: 100px 100px;

            background-size: 100px;

        }

        /* 百分比 */

        .wrap .box4 {

            background: url(./img/7.jpg) no-repeat;

            background-size: 50% 50%;

            background-size: 50%;

            background-size: 20%;

        }

        /* cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点） */

        .wrap .box5 {

            width: 900px;

            height: 400px;

            background: url(./img/7.jpg) no-repeat;

            background-size: cover;

        }

        /* contain:包含，等比例缩放背景图片到完整显示在盒子中，但是背景图可能在区域范围内铺不满（宽高给大点） */

        .wrap .box6 {

            width: 600px;

            height: 400px;

            background: url(./img/7.jpg) no-repeat;

            background-size: contain;

        }

2.4 背景图定位区域——background-origin属性

* background-origin: padding-box; 默认值，背景图相对于内填充区域来定位

- background-origin: content-box; 背景图相对于内容来定位

- background-origin: border-box; 背景图片相对于边框区域来定位

        .wrap div {

            width: 200px;

            height: 200px;

            border: 20px dotted red;

            margin: 50px;

            padding: 50px;

        }

        /* 默认值，背景图相对于内填充区域来定位 */

        .wrap .box1 {

            background: url(./img/bg2.jpg) no-repeat;

            background-origin: padding-box;

        }

        /* 背景图相对于内容来定位 */

        .wrap .box2 {

            background: url(./img/bg2.jpg) no-repeat;

            background-origin: content-box;

        }

        /* 背景图片相对于边框区域来定位 */

        .wrap .box3 {

            background: url(./img/bg2.jpg) no-repeat;

            background-origin: border-box;

        }

2.5 背景颜色绘制区域——background-clip属性

* background-clip: border-box; 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值

* background-clip: padding-box; 背景被裁剪到内填充区域，在内容区、内填充区显示

- background-clip: content-box; 背景被裁剪到内容区域，仅在内容区域显示

     .wrap div {

            width: 200px;

            height: 200px;

            background: plum;

            padding: 30px;

            margin: 30px;

            border: 20px dotted black;

        }

        /* 背景被裁剪到内容区域，仅在内容区域显示 */

        .wrap div:nth-child(1) {

            /* content-box */

            background-clip: content-box;

        }

        /* 背景被裁剪到内填充区域，在内容区、内填充区显示 */

        .wrap div:nth-child(2) {

            /* padding-box */

            background-clip: padding-box;

        }

        /* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 */

        .wrap div:nth-child(3) {

            /* border-box */

            background-clip: border-box;

        }