CSS3边框、阴影及背景

一、边框

border-radius 圆角边框

1.border-radius： px

只有一个值时，四周的角都是这个值的弧度

2.border-radius： px   px

    两个值表示 第一值表示左上角和右下角的圆角大小

                       第二个值表示 右上角和左下角的圆角大小 （是对角关系）

3. border-radius： px   px  px

三个值表示 第一个值表示左上角的圆角大小

                   第二个值表示右上角和左下角的圆角大小( 是对角关系）

                    第三个值表示右下角的圆角大小

4. border-radius： px   px  px  px

   按照顺时针的顺序去设置 左上角 右上角 右下角 左下角  

                                  综上可以看出，值越大 圆角就越圆 

二、圆形

利用border-radius属性制作圆形的两个要点

               1. 元素的宽度和高度必须相同

               2.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

三、盒子阴影

                 inset 阴影类型内阴影

                outset 阴影类型外阴影 （🔺把inset删除 默认就是outset 外阴影模式）

                x-offset X轴位移，指定阴影水平位移量

                y-offset Y轴位移，用来指定阴影垂直位移量

                blur-radius 阴影模糊半径阴影向外模糊的模糊范围

                color 阴影颜色，定义绘制阴影时所使用的颜色

1.内阴影

    box-shadow:inset  x-offset  y-offset  blur-radius  color; 

 2.外阴影

        box-shadow: x-offset  y-offset  blur-radius  color;

        outset 阴影类型外阴影   为默认  在里面不加，加了显示不出来阴影 

3.均匀出现模糊的内阴影和外阴影

 

 

 box-shadow:inset  x-offset  y-offset  blur-radius  color;

或

 box-shadow: x-offset  y-offset  blur-radius  color;

 在这，x-offset  y-offset都为0px     blur-radius的值越大就越往内颜色深 就会均匀呈现阴影效果

四、背景

1.background-size：

                                  px     px

      length   设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。

如果只给出一个值，第二个是设置为"auto(自动) " 第二个不设置也行 效果一样

     从这可以看出来，前面一个值都是120px 

        但是后面一位数给值或者是auto，呈现出来效果是不一样的

                                     %     %

    将计算相对于背景定位区域的百分比。 第一个值设置宽度，第二个值设置的高度。

 

如果只给出一个值，第二个是设置为"auto(自动) " 第二个不设置也行 效果一样

     从这可以看出来，前面一个值都是70% 

        但是后面一位数给值或者是auto，呈现出来效果是不一样的

background-size: 100% 100%;     

会覆盖背景定位区域 但是图片会全部出现展示出来 不会保持纵横比

background-size: 100%;

如果只给出一个值，第二个是设置为"auto(自动)"  

                                            cover  

           此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小

会保持纵横比 会覆盖背景定位区域 但是图片会出现展示不全 

                                contain

          此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

        会保持纵横比 图片会全部展示出来 不会完全覆盖背景定位区域

                        随着宽度和高度的不同 覆盖的区域也不相同

2.background-origin:

                                        padding-box;背景图像会贴着内边距的内部来展示 也是默认的

 

                                         border-box; 背景图像会贴在边框的内部来展示

 

                                         content-box;   背景图像会贴在内容的内部来展示

 

3. background-clip:

                                      padding-box;   背景被裁剪到内边距框 

      🔺background-clip背景图在padding之外的部分会被剪裁 而background-origin不会

                                     border-box;     背景被裁剪到边框盒

    🔺 在背景图重复出现的时候background-clip不会在边框的内容展示，

           会在边框的外部完全展示出来，也可以理解为边框内部背景图的部分被剪裁了   

                                       content-box;  背景被裁剪到内容框

    🔺背景图片还是在padding的内部位置，在文本外的区域会被剪裁掉 

                padding-box的两种 可以对比出来 

       上面一张 background-origin是因为重复，不然的话都是到内边距   红色框起来的就是重复，但是去掉 就会显示贴在内边距了

      第二张background-clip 很明显看出来被裁减过了，用 no-repeat 效果的话，对比不是很明显

border-box的两种 可以对比出来 

       上面一张 background-origin即时重复，也都贴在边框上面

      第二张background-clip 很明显看出来被裁减过了，用 no-repeat 效果的话，重复的图用红色的框了起来，可以看出来被裁减过了。

 

content-box的两种 可以对比出来 

       上面一张 background-origin是因为重复，不然的话都是到内容   红色框起来的就是重复，但是去掉 就会显示贴在内容了

      第二张background-clip 很明显看出来被裁减过了，用 no-repeat 效果的话，对比不是很明显