概念 - 盒模型属性
盒子阴影 box-shadow
| 属性值 | 说明 |
|---|---|
| horizen-shadow | 必需，水平阴影的位置，允许负值 |
| vertical-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影大小 |
| color | 可选，阴影颜色 |
| insert | 可选，阴影显示在盒子里面 |
盒子圆角边框 border-radius
/* 四角同时设置 */
.box1{
border-radius: 15px;
}
.box2{
border-radius: 10px 20px;
}
.box3{
border-radius: 5px 20px 10px;
}
.box4{
border-radius: 5px 30px 20px 15px;
}
.box5,.box6,.box7,.box8{
margin: 50px 0;
}
/* 单独设置其中一个角 */
.box5{
border-top-left-radius:20px;
}
.box6{
border-top-right-radius: 20px;
}
.box7{
border-bottom-right-radius: 20px;
}
.box8{
border-bottom-left-radius: 20px;
}
盒子轮廓 outline
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个input表单获得焦点的时候，该元素将会被一个轮廓线围绕。这个轮廓线框就是 outline
| 属性 | 属性值 | 说明 |
|---|---|---|
| outline | outline:<outline-color> <outline-style> <outline-width> / inherit; | 简写属性，在一个声明中设置所有的轮廓属性 |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit |
| outline-width | 设置轮廓的宽度 | thin medium thick length inherit |
*{outline: green dashed thin;}
- 轮廓（outline）与边框（border）的区别
- border 可应用于几乎所有有形的 html 元素，而 outline 是针对链接、表单控件和 ImageMap 等元素设计
- outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需 JavaScript 配合 CSS 来控制
- border 属性是盒模型的一部分，用于指定元素边框的样式、宽度和颜色，占据空间，但 outline 是不占空间的，不会像 border 那样影响元素的尺寸或者位置，既不会增加额外的 width 或者 height（这样不会导致浏览器渲染时出现 reflow 或是 repaint）
- outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
- outline 属性的轮廓线四个方向都是一样的，但border可以指定某条边设置不一样
- outline 属性的外轮廓线是闭合的，不允许只设置某一边
- outline 创建的轮廓线可以向内扩展（将outline-offset设置为负值），而border只能向内
盒子阴影和圆角边框实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.container{
width: 300px;
height: 25px;
border: 1px solid lightgray;
padding: 5px;
/* 两个阴影属性，用逗号隔开 */
box-shadow: 0 3px 0px lightgray,0 5px 2px gray;
display: flex;
justify-content: space-around;
border-radius: 5px;
}
.search_box,.search_submit{
flex-grow: 1;
border-radius: 8px;
border: 1px solid lavender;
}
.search_box{
outline: none; /* 去掉input选中时候默认会出现的黑边 */
text-indent: 10px; /* 将input框内的文本缩进一点 */
margin-right: 8px;
}
</style>
</head>
<body>
<form action="#" method="post" class="container">
<input type="search" class="search_box" list="search_list" name="search_web" placeholder="Search for CSS3, HTML5...">
<datalist id="search_list">
<option value="CSS3 Structure">
<option value="HTML5 Structure">
<option value="JavaScript Structure">
</datalist>
<input type="submit" class="search_submit" value="GO">
</form>
</body>
</html>
对比 - 标准盒模型VS怪异盒模型
两者区别
-
CSS盒模型本质是一个盒子，由margin、border、padding、content组成
-
CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型），区别在于他们的总宽度的计算方式不同。 在文档首部加了
<!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。 -
标准盒模型
-
怪异盒模型
关键代码
.box1{
box-sizing: border-box; /* 怪异盒模型 */
}
.box2{
box-sizing: content-box; /* 标准盒模型 */
}
技巧 - 盒子模型中margin外边距特性问题
问题痛点
HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。盒子模型中，margin常常会遇到两个特性问题：
- 兄弟关系，两个盒子垂直外边距与水平外边距问题
- 垂直方向上，取最大值
- 水平方向上，合并处理
- 父子关系，给子元素加margin上下外边距，但作用于父元素
关键代码 - 特性问题2的解决办法
/* 方法1：不设置子元素.childbox的margin-top，
而设置父元素.parentbox的padding-top，注意高度计算 */
.parentbox{ padding-top:30px; }
/* 方法2：给父元素.parentbox设置边框，可设置透明色，注意高度计算*/
.parentbox{ border:1px dashed transparent; }
.childbox{ margin-top:30px; }
/* 方法3：给父元素.parentbox设置flex*/
.parentbox{ display:flex; }
.childbox{ margin-top:30px; }
/* 方法4：给父元素或子元素设置float */
.parentbox{ float:left; } 或 .childbox{ float:left; }
.childbox{ margin-top:30px; }
/* 方法5：给父元素设置overflow:hidden; */
.parentbox{ overflow:hidden; }
.childbox{ margin-top:30px; }
