【每日前端】box-shadow / background

[jctang1202]

box-shadow

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
https://css-tricks.com/almanac/properties/b/box-shadow/
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

background

• background-color
• background-image
• background-position
• background-repeat
• background-attachment
• background-origin
• background-clip

background 的一个或多个值，可以按任意顺序放置

background: url(/static/image/web/index/bg.jpg) no-repeat 50% 50% fixed;
background-size: cover;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

background-size

cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain, on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

https://css-tricks.com/almanac/properties/b/background-size/

background-repeat

https://css-tricks.com/almanac/properties/b/background-repeat/

background-image

https://css-tricks.com/almanac/properties/b/background-image/

background-position

You can give background-position up to four values in modern browsers

Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.

https://css-tricks.com/almanac/properties/b/background-position/

background-origin

There are four values: border-box, padding-box, content-box and inherit.

https://css-tricks.com/almanac/properties/b/background-origin/

background-attachment

There are three values: scroll, fixed, and local.

https://css-tricks.com/almanac/properties/b/background-attachment/

background-clip

background-clip 这个属性感觉跟background-origin差不多，值也是一样。
前者可以理解为背景的裁剪范围，后者是背景的显示范围。

background-origin is similar to background-clip, except it resizes the background rather than clipping it.