1.background-origin:设置背景图片的原始起始位置，前提是no-repeat。
<style>
.bg {
background:url("图片路径") no-repeat;
background-origin:content-box/border-box/padding-box;
}
</style>
<body>
<div class="bg"></div>
</body>
2.background-clip:设置背景图片向外裁剪的区域。
<style>
.bg {
background:url("图片路径") no-repeat;
background-clip:border-box/content-box/padding-box/text
}
</style>
<body>
<div class="bg"></div>
</body>
3.background-size:背景的尺寸。
<style>
.bg {
background:url("图片路径") no-repeat;
background-size:20px 40px /20% 40%/cover
}
</style>
<body>
<div class="bg"></div>
</body>
4.background:背景。
<style>
.bg {
background: #ccc url("图片路径") no-repeat 50% 30px;
}
</style>
<body>
<div class="bg"></div>
</body>
5.多重背景，用逗号隔开每组background的缩写，如果有size值要紧跟position属性并且用/隔开，大小不同的背景要注意顺序。
<style>
.bg {
background:#ccc url("图片路径1") no-repeat center right/50px 20px,
url("图片路径2") no-repeat center left/20px 50px
}
</style>
<body>
<div class="bg"></div>
</body>
6.list-style-type:disc/circle/square/none。
<style>
ul {
list-style-type:none;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
7.list-style-image:用图片来定义列表的每一项的头部图片。
<style>
ul {
list-style-image:url("图片路径");
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
8.transform:改变元素的大小、透明度、旋转角度、扭曲度。
<style>
.bg {
background:#ccc;
width:100px;
height:100px;
transform:translate(水平平移参数 垂直平移参数)/
transform-origin:left/right/center/bottom/top(中心点位置);
transformX(水平平移参数);
translateY(垂直平移参数);
rotate(旋转角度);
scale(水平缩放倍数 垂直缩放倍数);
skew(扭曲角度);
translate3d(X,Y,Z);
}
</style>
<body>
<div class="bg"></div>
</body>
9.transition(过渡):步骤：a.声明样式初始状态 b.声明过渡属性最终样式 c.添加过渡函数，和一些样式。
<style>
.bg {
width:200px;
heigth:200px
color:red;
border-radius:10px
transition:all 3s ease-in 0.1s;
}
.bg:hover {
width:100px;
height:100px
color:blue;
border-radius:50%;
}
</style>
<body>
<div class="bg">嘻嘻</div>
</body>
10.transition:property/duration/timing-function/delay。属性值（可以设置为all）/ 过渡时间 / 过渡函数（ease-in/ease-out/..）/ 延迟时间。
时间： 2024-12-14 06:54:15