背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat; } </style> </head> <body> <div class="box"></div> </body> </html> 3.背景大小background-size:值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 800px; border: 10px dashed #000; background: url(image/Aatrox_1.jpg) 0 0 no-repeat; /* 一个值的情况下，宽度会进行拉伸，高度会保持等比例 */ /* 两个值的情况下，宽度和高度都会拉伸，可能会产生变形 */ /* 可以接受百分比 百分比参照的是盒子的宽和高 */ /* contain 当图片的宽度或者是高度有一个达到了最大值，整体停止缩放 可能会带来留白呀*/ /* cover 在contain的基础上，保持不留白，继续放大，知道另外一个边也得到最大值 */ background-size:cover; /* 预告： background-size会在自适应页面里面用到，在全屏轮播图里面用到 */ } </style> </head> <body> <div class="box"></div> </body> </html> 盒子内减box-sizing之前我们的盒子的实际宽度是 实际宽度 = width + padding + border，而内减属性会自动帮我们减去padding和border值 ，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; background-color: yellowgreen; margin: 10px auto; } div:nth-child(2){ padding: 10px; } div:nth-child(3){ padding: 10px; border: 10px solid hotpink; } div:nth-child(4){ padding: 10px; border: 10px solid hotpink; box-sizing: border-box; } </style> </head> <body> <!-- 一个盒子真正的实际宽度包括 Border + padding + width 在css3中，可以借助于border-sizing去实现盒子自动内减，有两个值 broder-box content-box broder-box 内减掉边框和padding content-box 是默认值 该是多少就是多少 --> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html> 渐变 1.线性渐变
相关文章
精彩导读
热门资讯
关注我们
