backgorund-size
值與說明
length(單位像素):設置背景圖片高度和寬度，第一個值設置寬度，第二個值設置高度，如果只給出一個值，第二個是設置為auto。
percentage(百分比):以父元素的百分比來設置背景圖像的寬度和高度，第一個值設置寬度，第二個值設置高度，如果只給出一個值，第二個是設置為auto。
cover:把背景圖片擴展至足夠大，使背景圖像完全覆蓋背景區域，背景圖像的某些部分也許無法顯示在背景特定區域中。
contain:把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
語法:
background-size 100px
? ? ? ? ? ? ? ? ? ? ? ? ?? ?100%(可以通過這個壓縮圖片)? ? ? ? ? ? ? ? ? ? ? ? cover
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?contain
background-origin
值與說明
padding-box:背景圖像相對于內邊距框來定位
border-box:背景圖像相對于邊框盒來定位
content-box:背景圖像相對于內容框來定位
background-clip
值與說明
padding-box:背景被裁剪到內邊距框
border-box:背景被裁剪到邊框盒
content-box:背景被裁剪到內容框
box-show盒子陰影
(給內容添加陰影，使其更加立體)
h-shadow:必須的值，水平陰影的位置，允許負值。
v-shadow:必須的值，垂直陰影的位置，允許負值。
blur:可選的值，模糊距離。
spread:可選的值，陰影的尺寸，外延值。
color:可選的值，陰影的顏色。
inset:可選的值，將外部陰影(outset)改為內部? ? ? ? ? ?陰影
語法:box-show:水平 垂直 模糊的尺寸 陰影的寬度 陰影顏色
我們來隨便寫一個鼠標放置產生陰影變化的例子:
<style>
? ? ? ? ?*{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? height: 0;
? ? ? ? ?}
? ? ? ? ?.box{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? border: 1px solid black;
? ? ? ? ? ? margin: 60px auto;
? ? ? ? ?}
? ? ? ? ?.box:hover{
? ? ? ? ? ? box-shadow: 47px 47px 12px 12px #999;
? ? ? ? ?}
? ? </style>
</head>
<body>
? ?<div class="box"></div>
</body>
?沒有固定的參數，效果都是靠后期調整出來的。
這個盒子陰影的應用場景是很多的，這里以個小米的商城為例子
?我們的鼠標放置后它會產生一個略微放大和陰影的效果，更有立體感。
今天就說這么多吧，說個題外話，最近OpenAI的sora不是火了嗎，網上出來很多所謂AI講師來賣課，不說百分之百其實也差不多了，都是出來割韭菜的，朋友們細心一點小心別被騙，如果有時間后面可以開一期講這個，沒有就算了，最后祝大家工作順利，生活愉快。
?
?
?
)
