边框与背景

作者:课课家教育更新于： 2017-04-17 17:31:29

　　小编这篇文章主要给大家介绍块状元素边框样式设置以及区块背景的样式设置。css当中的边框以及背景不仅仅可以设置整个网页的背景颜色，而且还可以设置指定html元素的背景色。

　　（一）边框

　　在前面的文章中小编就已经使用过边框属性border，下面给大家详细的介绍边框属性border可以实现的三种不同样式的效果。

　　（1）方角边框

　　方角边框是最常见的边框样式，，我们前面已经使用过虚线边框，双线边框，实线边框，点线边框，以下是border属性可以使用的全部边框值：

　　A.none没有边框；

　　B.dashed破折线边框；

　　C.dotted圆点线边框；

　　D.double双线边框；

　　E.groove槽线边框；

　　F.inset使元素内容具有内嵌效果的边框；

　　G.outset使元素内容具有外凸效果的边框；

　　H.ridge脊线边框；

　　I.solid实线边框.

　　比较常见的是none无边框，dashed虚线边框以及solid实线边框；

　　下面小编就挑选其中的几个属性值举例，如下例，把这些属性值代入border属性后，效果如下：

      显示效果：

　　除使用border属性一次性设置上下左右四面的边框以外，border还有四个子属性可以设置上下左右的边框，例如：

      显示效果：

　　（2）圆角边框

　　css3新增的特性就是圆角边框，在方角边框的上，配置一个border-radius属性实现，一次性可以配置四个角，也能只配置一个角，如下例：

       显示效果：

　　（3）图像边框

　　border-image属性能够给块状元素边框添加背景图像，它有多个子属性，要是把子属性一次性配置在border-image里，完整的语法格式为：border-image:border-image-sourceborder-image-slice[/border-image-width|/border-image-outset]border-image-repeat;

　　子属性的简单描述如下：

　　A.border-image-source：指的是用来指定边框图像文件的路径；

　　B.border-image-slice：是指边框图形切割值；

　　C.border-image-width：指的是边框图形显示的宽度，该属性跟border属性在边框图形属性中一定要配置其一，要是配置了这个属性，就将会把border属性中配置的边框宽度替换掉；

　　D.border-image-outset：是指图形边框向外扩充的宽度；

　　E.border-image-repeat：指的是拉伸区域的显示效果；

　　以下为w3c官方提供的边框背景图，默认如下，每一个菱形的对角线长度为27px：

　　border-image-slice属性与margin属性相同，要是只配置一个值，那就一次性设置"上右下左"，也能设置四个不一样的值，例如："border-image-slice:27262524"，要是仅用一个值切割这张图形"border-image-slice:27"，如下：

　　首先程序从图像的上方向下偏移27px，切割第一刀，再从图像最右侧往左偏移27px切割第二刀，类推；

　　切割后的模型被分成9个区域，如下图：

　　1234区域就用来填充标签边框的四个角，默认情况下，5678区域被拉升填充边框的四条边，要是border-image-slice属性随了一个fill值，第9块的区域就会被填充，不然的话就会显示成为标签的背景颜色。

　　以上都是为了下例做铺垫，如下例：

      显示效果：

　　（二）背景

　　（1）设置区块背景颜色

　　在前面的文章中小编已经使用过background-color这个属性，background-color这个属性功能就是给标签添加一个背景颜色；

       效果如下：

　　（2）设置区块背景透明度

　　标签都默透明背景色，有时用css选择器同类型几个标签并配置了背景色，要是想让某个标签背景色透明，就能使用该属性，把它的背景色配置成透明：

      显示效果如下:

　　（3）设置背景图片与样式

　　能给全部块状元素添加背景图：

      效果如下：

　　（4）调整背景图片位置

　　background-position属性可以调整在标签中图片的相对位置，如下例：

      效果如下：

　　background-position除了以上4个属性值外，还有属性right，top，rightbottom，topright以及topleft，移动的位置与字面意思相同。

　　注意：在调整图片位置的过程中，在对body设置背景图片并且调整图片在bottom时发现图片以及top的效果相同，由于浏览器不知道body的具体高度，能手动给body设置高度范围或设置html标签的css属性就把height设置为100%，这样的话图片居中样式就会起作用。

　　（5）配置背景图片缩放

　　背景图片的缩放的方式有：cover缩放、contain缩放、百分比缩放以及指定宽高缩放；

      显示效果：

　　（6）配置背景与文字一起滚动

　　默认background-attachment属性为scroll，那么背景随文字一起滚动，把fixed设置好以后，背景就会固定，只有文字滚动；

　　（7）设置背景起始点

　　默认情况下，给一个块状元素配置背景图，背景图在合模型的border内部填充，但是css提供属性“background-origin”，会使背景图延伸到border当中，background-origin允许的属性值如下：

　　A.border-box在margin盒子内部绘制背景；

　　B.padding-box在border盒子内部绘制背景，默认值；

　　C.content-box在padding盒子内部绘制背景；

       效果如下：

　　（8）设置背景裁剪的方式

　　css提供了背景图片裁剪属性background-clip，属性值如下：

　　A.border-box裁剪掉border盒子外的背景；

　　B.padding-box裁剪掉padding盒子外的背景；

　　C.content-box裁剪掉content盒子外的背景；

　　按照以上对background-origin属性的解释，就是指把超出属性值范围的多余图像裁剪掉，如下例：

      效果如下：

　　（9）background综合配置

　　以上全部background子属性都能一次性配置在background属性中，完整格式如下：background:[background-color][background-image][background-repeat][background-attachment][background-position]/[background-size][background-origin][background-clip];

      效果如下：

　　总结：本文主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。盒模型的尺寸可以通过两种方式实现可见性，一种是边框，还有一种就是背景。大家可以继续关注我们的网站:课课家教育来获得更多关于Web开发的内容。