css实现九宫格切割分割照片效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现九宫格切割分割照片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ margin: 0; padding: 0; /* // 设定居中 */ display: flex; justify-content: center; align-items: center; height: 100vh; } .container{ width: 300px; height: 300px; display: flex; /* // 子盒子布局,要让子盒子之间有间隙就把宽高设大一些。 */ justify-content: space-between; flex-wrap: wrap; position: relative; /* background-color: red; */ } .item{ overflow: hidden; box-shadow: inset 0 0 0 1px #FFF; transition: 0.5s; background-size: 300px 300px; height: 100px; width: 100px; background-image: url(//repo.bfw.wiki/bfwrepo/image/633120b93355b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90); } /* 选中每行盒子的第一个 */ .item:nth-child(3n + 1){ /* margin-left: -20px; */ background-position-x: 0; } .item:nth-child(3n.........完整代码请登录后点击上方下载按钮下载查看
网友评论0