盒模型阴影和背景
6.1 盒模型阴影
box-shadow
:[inset] x y blur [spread] color,… (x、y、blur和color同文字阴影)
- [inset]:投影方式(默认为外投影,inset为内投影)
- [spread]:扩展阴影半径(先扩展原有形状,再开始画阴影)
div{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
/* box-shadow: 10px -10px 5px black; */
/* 嵌入阴影;内置阴影 */
/* box-shadow: inset 10px 10px 5px black; */
/* 20px: spread 扩张距离 */
/* box-shadow: 10px 10px 5px 20px black; */
box-shadow: 10px 10px 5px black, inset 10px 10px 5px black;
/* inset 设置内置阴影 */
}
6.2 盒模型背景
-
多背景:在一个background中设置多个背景,用逗号分开:
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
div{ width: 800px; height: 600px; margin: 100px auto; border: 1px black solid; /* 背景图片:前面覆盖后面 */ background: url(../20200717/img/1.png) no-repeat 0 center,url(../20200717/img/2.png)no-repeat center top; background-size: 50% 50%, 30% 30%; }
-
背景其他样式
-
background-size
:背景尺寸,默认为图片大小,赋值为尺寸(像素)、百分比(相对于该元素宽高)或关键字(cover:覆盖;contain:包含)div{ border: 100px solid rgba(0, 0, 0, 0.3); width: 800px; height: 500px; /* center center 图片居中 */ background: url(../20200715/05-练习/img/昕昕子.jpg) no-repeat center center; /* 设置背景图大小 */ background-size: 300px 300px; background-size: 100% 100%; /* cover:等比例放大图片,直到最小变等于div的对应方向 */ background-size: cover; /* contain: 等比例缩小图片; */ /* background-size: contain; */ }
-
background-origin
:背景开始区域- border-box(背景图从边框开始渲染)
- padding-box(默认值,背景图从填充开始渲染)
- content-box(背景图从内容开始渲染)
div{ border: 100px solid rgba(0, 0, 0, 0.3); width: 800px; height: 500px; /* 设置背景图大小 */ background-size: 100% 100%; /* 默认:照片起点为padding */ padding: 80px; background: url(../20200715/05-练习/img/昕昕子.jpg); background-origin: content-box; }
-
background-clip
:背景裁剪- borde-box(默认值,背景图将边框外裁剪)
- padding-box(背景图将填充外裁剪)
- content-box(背景图将内容外裁剪)
- text(背景图将文字外裁剪)
div{ border: 100px solid rgba(0, 0, 0, 0.3); width: 800px; height: 500px; background-size: 100% 100%; padding: 80px; background: url(../20200715/05-练习/img/昕昕子.jpg); /* background-clip: content-box; */ /* background-clip: border-box; */ background-clip: padding-box; }
-
漂亮的特效
div{ border: 100px solid rgba(0, 0, 0, 0.3); width: 800px; height: 500px; background-size: 100% 100%; padding: 80px; background: url(../20200715/05-练习/img/昕昕子.jpg); /* 谷歌貌似不支持 */ /* 适配: -webkit- */ -webkit-background-clip: text; /* 设置透明色:tansparent */ color: transparent; font-size: 200px; }
-