《网页设计与制作》2CSS篇22banner边框的实现

CSS篇项目二“中国诗词”网站首页banner制作任务二banner边框的实现边框属性1CONTENTS目录01边框属性边框属性网页中的边框属性也是一个复合属性，一个边框样式至少需要定义颜色、线型和粗细三个基本属性才能显示出边框效果，对应了三个子属性：border-colorborder-color设置边框颜色，border-color值可以是任意能表示颜色的值。如果希望区块保留边框的位置，却又不显示边框，可以将border-color值设置为transparent，表示边框是透明的。这个值用于创建有宽度的不可见边框，在需要边框显示的时候可以通过JavaScript修改边框颜色使其可见。border-styleborder-style设置边框样式，CSS定义了10中不同的边框样式：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-width border-width设置边框粗细。border-width值可以是任意长度单位值，也可以用三个关键字：thin、medium和thick。但CSS3并没有对这三个关键字指定具体宽度，所以不同浏览器显示效果可能会有偏差。边框属性可以用复合属性border直接声明边框样式，三个子属性用空格隔开，语法如下：其中border-style不可省去，否则边框无法显示。其余两个值都有默认值，如不设置，会显示为默认值效果，边框颜色默认值为“黑色”；边框粗细默认值为“medium”。这样声明的区块边框四条边框样式相同，我们也可以给四条边框设置不同的样式，有两种方法可以实现，一种方法可以使用单边边框样式子属性分别设置，4个单边边框样式属性是：border-top：上边框border-bottom：下边框border-left：左边框border-right：右边框每个子属性声明规则和border相同。另一种方法是用颜色、线性和粗细三个子属性分别设置。多个位置设置的方式和项目一任务二中区块边距的设置相同，4个顺序为上、右、下、左。border:border-colorborder-styleborder-width;边框属性圆角样式在CSS3之前，想要实现区块的圆角效果，只能通过图片实现。CSS3中新增了border-radius属性，让实现圆角变得非常容易。语法规则如下：这里的length1表示圆角的水平偏移量，length2表示圆角的垂直偏移量，如图3-2-11。偏移量可以用长度单位或者百分比来表示。一个区块有四个角，因此我们在设置圆角的时候也就对应了4个值，length1和length2都可以用1-4个值来定义，不同值个数代表的含义可以参考项目一任务二中margin属性的定义，当定义4个值时按图中4个角标示数字的顺序。border-radius:length1/length2;边框属性图片边框border-image设置图片边框样式。图片边框样式是将原始图片进行9宫格分割，如图3-2-13，分割后四个角处的小图按设置的边框尺寸缩放后放置在区块对应角的位置，上、下、左、右的四张小图按设置的显示方式填充区块上、下、左、右四条边框（四个角除外），中间的小图会重复填充区块背景部分。border-image的语法是：border-image:url("URL")ABCD/border-widthtopbottomleftrighturl：图片的相对路径ABCD：图片分割宽度，对应图3-2-12中的标示。默认单位是px，这里只要设置数值，如果四个宽度相同，只要设置一个值即可。border-width：区块边框的宽度topbottom：上下两条边中图像的显示方法，repeat表示重复，stretch表示拉伸（默认），round表示平铺leftright：左右两条边中图像的显示方法边框属性图片边框border-image设置图片边框样式。图片边框样式是将原始图片进行9宫格分割，如图3-2-13，分割后四个角处的小图按设置的边框尺寸缩放后放置在区块对应角的位置，上、下、左、右的四张小图按设置的显示方式填充区块上、下、左、右四条边框（四个角除外），中间的小图会重复填充区块背景部分。border-image的语法是：border-image:url("URL")ABCD/border-widthtopbottomleftrighturl：图片的相对路径ABCD：图片分割宽度，对应图3-2-12中的标示。默认单位是px，这里只要设置数值，如果四个宽度相同，只要设置一个值即可。border-width：区块边框的宽度topbottom：上下两条边中图像的显示方法，repeat表示重复，stretch表示拉伸（默认），round表示平铺。repeat和round都是重复显示小图，但是round会自动调整小图间距，使其完整的显示在边框范围leftright：左右两条边中图像的显示方法边框属性巧用边框样式——尖角当区块的边框有一定的宽度时，四个角就是这个宽度大小的四个小正方形。这四个小正方形对于相邻的两条边框来说是共用的，如右上角的小正方形即是右边框的一部分，也是上边框的一部分。div{width:0px;height:0px; border:20pxsolidred;border-top-color:blue;border-bottom-color:blue;}边框属性巧用边框样式——圆形CSS2时网页中使用的区块多数是矩形区块，要使用圆形、三角形、平行四边形等区块形状通常要通过外部图片的辅助来实现。CSS3中新增了一些样式属性，可以帮助我们实现更灵活的区块形状。接下来我们就来看看圆形区块的实现。border-radius属性实现圆角矩形效果，从图3-2-11可以看出，如果把length1和length2的值不断增加，矩形的圆角弧度就会不断变大，最终相邻两个角的邻边会交于一点。如果交于一点时length1和length2大小相同，此时这条边框就变成了一条弧线，如果4条边框都变成弧线，就形