css学习（二）：背景、圆角、阴影

一、background背景

1、css2中主要的背景属性：

• background-color：背景颜色；
• background-img：背景图片；
• background-repeat：背景（如果）重复；默认值是repeat；
• background-attachment：背景图片是否固定或者随着页面的其余部分滚动；默认值是scroll；
• background-position：背景定位；默认是0 0（ left top ）；

2、css3中新增的背景属性：

• background-size：背景大小；auto auto
• background-origin：背景开始绘制（定位）的区域；padding-box（内边距）左上角
• backgroun-clip：背景显示的区域（可以显示到哪个区域）；border-box（边框）左上角；

3、注意事项：

1. 如果写成简写：background：#455678 url（ ） no-reapeat scroll 0 0 / cover padding-box;   background-size需要在background-position后面，并且必须要用"/" 分割；
2. background-origin属性必须要在background-clip属性之前，如果后面只有一个值，则代表的是background-origin的属性值，而backgroun-clip则用默认值代替；
3. background-origin的默认值是padding-box（内边距），此属性将影响到background-position属性（默认从origin内边距左上角开始定位）；如果背景不是no-repeat的话，这个属性是无效的。它会从border-box区域开始显示，这一点很重要！！！
4. background-clip（裁剪/隐藏）的默认属性是border-box（背景图片）；既：从边框---内边距---内容区域都显示；如果设置的值是content-box的时候，则代表只有内容区域的背景显示，替他部分（padding，border）背景（图片或者颜色）隐藏/裁剪；
5. background-color是从元素的边框左上角起到右下角止(虽然有时候会被边框颜色覆盖)，而background-image却不一样，他是从padding边缘的左上角起（默认，有origin默认决定）而到border的右下角边缘止；

4、background-attachment的几个值得一些说明

• srcoll：默认值。背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）；如果元素本身动，背景则随着动，如果元素本身不动（不管里面内容动不动），背景则不动；-----和元素粘贴在一起；
• local：表示背景相对于元素的内容固定。如果一个元素拥有滚动机制（比如溢出，设置的overflow:scroll），背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框；-------和内容粘在一起；
• fixed：相对于视口固定。即使一个元素拥有滚动机制（元素滚动，背景是相对于视口而定的），背景也不会随着元素的内容滚动（因为背景相当于视口是固定的，在一个视口中，背景固定，内容滚动）。-----和视口粘在一起；

注意：这里的视口和固定定位fixed一样，视口（viewport）就是前可见的计算机图形区域；相对于桌面壁纸背景；

5、background-opsition的值说明：此属于会受css3中的background-origin属性影响；

关键词：top、bottom、left、right；  数值和百分比：

• 如果只有一个值：代表的是水平方向的移动距离。如top（center），20px/（center），另外一个（垂直方向移动距离）默认是center居中；
• 如果有两个值：如bottom right; 20px 40px ;50% 50%, 则分别代表水平方向和垂直方向移动的距离；并且第一个值必须是横（X）坐标，第二个值必须是Y（纵）坐标；
• 如果有三个值：如top（0） right 10px;相当于省略一个为0的值；

特别注意：

top 20px；诸如这样的写法是错误的（因为两个值得话，第一个必须是x坐标）；而20px top 以及 right 20px 则正确写法；

如果用的值是百分比（%）表示的话，那么，这个%（百分比）是相对于谁？ 如：30% 50%；

• x移动距离：（元素（盒子）宽度—图片宽度）*30%；如果盒子宽度<图片宽度,得出的是负值，既往相反方向移动；
• Y移动距离：（元素（盒子）宽度—图片宽度）*50%；
• 百分比设置的主要优势在于，当页面缩放的时候，背景图片也会跟着一起缩放；

6、background-size相关的值说明：

关键字属性值：

• cover：遮盖，覆盖；图片等比例放大，覆盖整个盒子后，多余的部分裁剪掉；
• contain：包含：图片放大，但是只有宽（或者高）会填满，元素的一部分空白；
• 无论是cover还是contain，都是等比放大/缩小；（相当于ps中的ctal+T；）

数值属性值：

• 如果只有一个值：则代表的是宽的大小，另外一个默认是auto，如 20px（auto）---等比缩放；
• 如果有两个值：则分别代表宽和高的大小（按照给定的宽和高的值进行不同比例的缩放，可能会造成拉伸、压扁长或者高等）；
• 如果是百分比%：则代表的是背景相对于背景区域的百分比（由background-origin属性决定，默认是padding+content）；如果attachment 为fixed，背景区域为浏览器可视区（即视口），不包括滚动条。不能为负值。

7、多背景图片

• 每个背景图片间用 "," 分割； background: background1, background 2, ..., backgroundN；
• 如果有背景颜色，则背景颜色放在最后一个背景图片的后面； background: background1, background 2, ..., backgroundN red；
• 如果两个背景图片有交集相重叠，则前一个背景图片遮住后一个背景图片的重叠部分；

二、border-radius:边框圆角：

• border-radius：15px；代表边框四个角的水平方向半径和垂直方向半径都是15px；
• border-radius：15px 25px；代表边框左上角和右下角的水平半径以垂直半径是15px；而右上角和左下角的水平半径以及垂直半径是25px；
• border-radius：15px/25px；代表边框四个角的水平半径都是15px，垂直半径都是25px；
• 值顺序和margin以及padding属性的是一样的；

三、box-shadow：盒子阴影

1、语法：

box-shadow: offset-x（水平偏移） offset-y（垂直偏移） blur（阴影模糊半径） spread（阴影扩展半径） color（颜色） position（位置/内外阴影）;

给出两个、三个或四个数字值的情况。
如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。
如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
可选， 插页(阴影向内) inset。
可选， 颜色值 <color>。

2、实现步骤

1. 在元素上面，以元素原大小和指定元素，绘制一个矩形；
2. 根据offset-x、offset-y的值，对矩形进行偏移；
3. 根据blur对矩形进行模糊处理；以矩形（阴影）边界为分割，向两端计算起始（各为blur值得一半），做模糊渐变；矩形里面（从距离边界blur值得一半开始）的阴影最重，矩形外模糊扩展的尺寸阴影逐渐变淡，矩形外模糊大小基本为blur值得一半；
4. 根据spread对矩形进行缩放（扩展/缩小）；
5. 把投影（矩形）和元素叠加的部分切除掉，完成了投影的过程；

四、img的一些介绍说明

1、img元素的宽高如果没有设置具体的值，则有src的替换内容决定的；
2、object-fit这个属性其实是作用在src替换内容上的，使其填充到img元素中；
img元素中设置的width:100%的话，此时是相对于父元素的100%,即：不管
替换内容是否大于或者小于父元素，则缩小或者拉伸填满父元素
img元素中设置的max-width：100%的话，此时如果src内容尺寸小于父元素
宽度的话，则不会放大，保持最大原型；如果src内容尺寸大于父元素尺寸，则
缩小到与父元素宽度尺寸一样；

3、总结：max-width：100%：如果img宽度大于父元素，img就显示父元素100%宽度，若父元素宽度超过自身，则显示img100%的宽度。
width:100%：不管img宽度多少，都显示父元素100%的宽度。

参考：

http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html
https://blog.youkuaiyun.com/jeamking/article/details/5617088
https://www.cnblogs.com/2050/archive/2012/11/13/2768289.html

http://www.softwhy.com/article-8527-1.html

深入浅出CSS3：background-clip,background-origin和border-image教程 - hh54188 - 博客园

你真的理解CSS的linear-gradient？_gradient 教程_W3cplus    （linear-gradient）