HTML5权威指南——使用边框和背景

今日迷惑：如何写好技术类的读书笔记而不成为一个抄书怪？

应用边框样式

• 边框的三个关键属性：border-width，border-style，border-color对于这三个属性可以直接简写为border
• border-width的属性值如下

值	说明
长度值	使用如em,px,cm 的长度值
百分数	将边框宽度设置为边框绘制区域的宽度的百分数
thin/medium/thick	这些宽度的值由浏览器决定，逐一增宽

• border-style属性默认none下面使它的属性值的展示：需要注意的是，在border-color为black时，一些浏览器在应用双色边框样式（groove，inset，outset，ridge）的时候会出现一些问题，即最终的呈现是实线边框（如chrome）但Firefox就很好！
  
• 当我们打算只在特定方向的边框上应用样式时就可以像这样 border-top/right/left/bottom-width/style/color
• 设置所有边框的简写：border，一条边的简写：border-top/left/right/bottom
• 创建圆角边框：四个角都要就是border-radius 若是单独的一个那就是 border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius
• 创建圆角的值一般有两个，第一个指定水平曲线半径，第二个指定垂直曲线半径。例如：border-top-left：20px 15px；
  
• 将图像用作边框的属性是border-image它可以包含以下几个属性：border-image-source/border-image-slice/border-image-width/border-image-outset/border-image-repeat
• 其中border-image-slice 用来设置切分图像的偏移，border-image-outset用来设置边框图像向外扩展的部分

设置元素的背景

• 设置元素的背景颜色或者图像就是background-color/background-image
• background-repeat：设置图片的平铺方向
• background-size：设置背景图像的尺寸，有contain，cover，auto
• background-position：背景图像的位置，有top/left/right/bottom/center
• background-attachment：背景的附着方式有fixed/local/scroll
• background-origin指定背景图的开始位置，backgroud-clip背景图的剪裁样式。

创建盒子阴影

• box-shadow：hoffset voffset blur spread color inset（后四个值是可选的），前两个分别是水平偏移量和垂直偏移量

应用轮廓

• 轮廓和边框的关系：轮廓在边框的外面，且轮廓不属于页面
• outline简写属性。