目录
-
相关内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; background-color: paleturquoise; /* 借助margin */ margin: 0 auto; /* 赋值情况类似于padding */ /* border-radius: 30px; */ /* 设置两个值 左上与右下 左下与右上*/ /* border-radius: 20px 40px; */ /* 左上 左下与右上 右下 */ /* border-radius: 20px 40px 60px; */ /* 左上 右上 右下 左下 */ /* border-radius: 20px 40px 60px 80px; */ /* 只设置某一个角 */ border-top-left-radius: 50%; /* border-top-right-radius: ; border-bottom-left-radius: ; border-bottom-right-radius: ; */ border-radius: 0 50% 50%; /* 盒子阴影 水平便宜 垂直便宜 羽化度 阴影颜色 */ box-shadow: 5px 5px 5px palevioletred; } </style> </head> <body> <!-- 布局的问题：在不知道父子标签大小的情况下 子标签 相对于父标签水平居中 借助的margin auto自适应的值 --> <div></div> <!-- 切圆角 四个角都有切的 --> </body> </html> -
标准与怪异的区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 演示的是标准 */ .normal{ background-color: paleturquoise; width: 100px; height: 142px; /* 添加内边距 */ padding: 20px; } /* 演示的是怪异 */ .special{ box-sizing: border-box; background-color: paleturquoise; width: 100px; height: 142px; padding: 20px; } </style> </head> <body> <img class="normal" src="../img/动漫.jpg" /> <img class="special" src="../img/动漫.jpg" /> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
