背景图
background属性是一个简写属性,可以在一个声明中设置所有的背景属性,包括:
-
background-color 指定要使用的背景颜色
-
background-position 指定背景图像的位置
-
background-size 指定背景图片的大小
-
background-repeat 指定如何重复背景图像
-
background-origin 指定背景图像的定位区域
-
background-clip 指定背景图像的绘画区域
-
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
-
background-image 指定要使用的一个或多个背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
width: 500px;
height: 280px;
/* 背景图像大小 */
background-size: 100px, 500px;
/* 背景图 */
background-image: url(img/kl.webp), url(img/bj.webp);
/* 背景图像的起始位置。 */
background-position: right bottom, left center;
/* 背景图像平铺 */
background-repeat: no-repeat, repeat;
color: #FFFFFF;
text-indent: 2rem;
}
</style>
</head>
<body>
<div class="div1">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
</body>
</html>
运行效果:
background-Origin属性指定background-position属性应该是相对位置。
值 | 描述 |
---|---|
padding-box | 背景图像填充框的相对位置 |
border-box | 背景图像边界框的相对位置 |
content-box | 背景图像的相对位置的内容框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div2 {
margin-top: 40px;
width: 1520px;
}
.a1 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-size: 20px;
background-image: url(img/kl.webp);
background-repeat: no-repeat;
/*背景图像边界框的相对位置*/
background-origin: border-box;
text-indent: 2rem;
float: left;
}
.a2 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-size: 20px;
background-image: url(img/kl.webp);
background-repeat: no-repeat;
/* 背景图像填充框的相对位置 */
background-origin: padding-box;
text-indent: 2rem;
float: left;
margin-left: 10px;
}
.a3 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-size: 20px;
background-image: url(img/kl.webp);
background-repeat: no-repeat;
/* 背景图像的相对位置的内容框 */
background-origin: content-box;
text-indent: 2rem;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div2">
<div class="a1">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
<div class="a2">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
<div class="a3">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
</div>
</body>
</html>
运行效果:
background-clip属性指定背景绘制区域。
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框) |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框) |
content-box | 背景绘制在内容方框内(剪切成内容方框) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div3 {
width: 1520px;
}
.b1 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-color: orange;
/* 默认值。背景绘制在边框方框内 */
background-clip: border-box;
text-indent: 2rem;
float: left;
}
.b2 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-color: orange;
/* 背景绘制在衬距方框内 */
background-clip: padding-box;
text-indent: 2rem;
float: left;
margin-left: 10px;
}
.b3 {
width: 380px;
height: 280px;
padding: 30px;
border: 30px solid rgba(255, 0, 0, 0.257);
background-color: orange;
/* 背景绘制在内容方框内 */
background-clip: content-box;
text-indent: 2rem;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div3">
<div class="b1">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
<div class="b2">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
<div class="b3">
<p> 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;
2014-15、2016-17、2017-18赛季、2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP);
[400] 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
2021-22赛季荣膺西部决赛MVP; [308] [382] 8次入选最佳阵容(4次一阵、3次二阵、1次三阵);
[311] [380] 8次入选全明星首发阵容,2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP。
</p>
</div>
</div>
</body>
</html>
运行效果:
边框图
border-image 属性允许在元素的边框上绘制图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 200px;
/* 透明边框 */
border: 15px solid transparent;
border-image: url(img/border.png) 30 30 round;
}
.div2{
width: 300px;
height: 200px;
/* 透明边框 */
border: 15px solid transparent;
border-image: url(img/border.png) 30 30 repeat;
}
.div3{
width: 300px;
height: 200px;
/* 透明边框 */
border: 15px solid transparent;
border-image: url(img/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div class="div1">铺满</div>
<div class="div2">平铺</div>
<div class="div3">拉伸</div>
</body>
</html>
运行效果:
阴影
box-shadow属性可以设置一个或多个下拉阴影的框。
box-shadow:水平阴影的位置 垂直阴影的位置 阴影模糊度 阴影颜色 内阴影外阴影(默认外阴影)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: #008000;
border-radius: 50%;
/* 同时给元素设置内外阴影 */
/* box-shadow:水平阴影的位置 垂直阴影的位置 阴影模糊度 阴影颜色 内阴影外阴影(默认外阴影)*/
box-shadow: 10px 10px 5px #47BDBE inset,7px 5px 5px #A6A6A6;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行效果:
过渡
transition 属性设置元素当过渡效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: #008000;
/* 过渡动画 all 全部过渡*/
transition: all 3s;
/* 过渡动画 部分过渡 */
/* transition: background-color 3s,border-radius 3s; */
/* 分3段执行 */
/* transition-timing-function: steps(3); */
}
.div1:hover{
background-color: #FF0000;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行效果:
动画(css)
一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。
动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: #008000;
border-radius: 50%;
/* 应用动画 */
animation-name: name;
/* 动画时长 */
animation-duration: 4s;
/* 动画填充模式,forwaeds的作用是将动画的样式停留在最后一个 */
animation-fill-mode: forwards;
/*动画延迟的时间 当值为负数时表示动画已经执行了多长时间(这里为正数所以2s后才
执行动画)*/
animation-delay: 2s;
/* 动画来反过渡 */
animation-direction: alternate;
/* 动画过渡次数(无限) */
animation-iteration-count: infinite;
}
@keyframes name{
/*默认属性*/
/* from{
background-color: #008000;
}
to{
background-color: #FF0000;
} */
/*分为四段*/
25%{
background-color: #0000FF;
}
50%{
background-color: #00FFFF;
}
75%{
background-color: #0198CD;
}
100%{
background-color: #EA5F50;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行效果: