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简写属性。