<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; background: #BBFFAA; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; text-align: center; line-height: 200px; box-shadow:inset 10px 10px 10px 0px black ; } </style> </head> <body> <!-- 盒模型阴影 box-shadow--> <div class="test"> test </div> </body> </html>
盒模型阴影 box-shadow和文本阴影一样
语法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影位置
v-shadow 垂直阴影位置
blur 模糊距离
spread 阴影尺寸
color 阴影颜色
inset 外部阴影改为内部阴影
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* img{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } 图片有自己的定位方式*/ html,body{ height: 100%; } body{ text-align: center; } body:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; } img{ width: 12.5rem; height: 12.5rem; vertical-align: middle; -webkit-box-reflect:right 0.625rem; } </style> </head> <body> <img src="../7.文本新增样式/img/周冬雨.jpg" > </body> </html>
倒影
-webkit-box-reflect: 属性设置倒影
注意图片位置排布
vertical-align 设置元素垂直对齐方式
属性值middle设置为居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ text-align: center; } body:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; } div{ width: 12.5rem; height: 12.5rem; display: inline-block; background: #BBFFAA; overflow: auto; resize: both; } </style> </head> <body> <div></div> </body> </html>
resize不常用了解就好，
规定可以由用户调整 div 元素的大小：
属性值 none 默认值 无法调整元素大小
both 可以调整元素的高度和宽度
horizontal 可以调整元素的宽度
vertical 可以调整元素的高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; padding: 50px; background: #BBFFAA; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; box-sizing: border-box; } </style> </head> <body> <div></div> </body> </html>
box-sizing：border-box从已设定的宽高分别减去边框和内边距得到内容的宽高