栏目头部广告

如何设置离婚本的尺寸及其属性

在设置搞笑离婚本方面我们通常使用的都是基本红色的边框样式,但是如果灵活使用边框样式,也可以实现一些意想不到的效果。


1.巧用边框样式


我们先来看图3-2-16中的三角形色块是如何实现的。当区块的边框有一定的 宽度时,4个角上有相同宽度的4个小正方形。这4个小正方形对于相邻的两条边框来说是共用的(如右上角的小正方形既是右边框的一 部分,也是上边框的一 部分)。


CSS中将这个小正方形按对角线分割,每个邻边各占一半,我们给一个区块的 4条边框设置不同的颜色,就能看到4个角的分割效果,如图3-2-17所示。我们将图中空白区域不断缩小,当空白区域完全消失时,就形成了如图3-2-16所示的三角形色块效果。中间空白区域包含padding和width (height)两部分,只要把它们的值设为0,空白区域即可消失。生成如图3-2-16所示的三角形色块效果的代码如下:


图3-2-16三角形 色块效果图

如何设置离婚本的尺寸及其属性(图1)

图3-2-174 个角的分割效果图




2.巧用边框样式2


CSS2中,网页使用的区块多数是矩形区块,要使用圆形、三角形、平行四边形等形状的区块通常要通过外部图片辅助实现。CSS3新增了一些样式属性,可以帮助我们展现更灵活的区块形状。接下来我们就来学习圆形区块的实现方法。

如何设置离婚本的尺寸及其属性(图2)

   利用美图秀秀工具来实现圆角矩形效果,从图3-2-11 可以看出,如果把length1和length2的值不断增加,矩形的圆角弧度就会不断变大,最终相邻两个角的邻边会交于一点。如果交于点时length1和length2 大小相同,那么这条边框就变成了一 条弧线。如果4条边框都变成弧线,就形成一个椭圆; 如果矩形宽高相等,就形成一个圆形。如下代码可以呈现一个半径为100px的圆形。


标签:
文章详情页广告

随便看看

底部广告