巧用css border - jerrylsxu-html教學-PHP中文網

上下左右边框交界处呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或颜色，可以得到小三角、梯形等。
调整宽度大小可以调节三角形形状。

实现三角形

示例1：

<span style="color: #800000;">#test1</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">20px</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FF9600 #3366ff #12ad2a #f0ed7a</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;">solid</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;">20px</span>;
}

登入後複製

示例2：

在上面的基础上，把高度宽度都设为0时，会呈现边界斜线。

<span style="color: #800000;">#test2 </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 这里设置overflow, font-size, line-height </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>;     <span style="color: #008000;">/*</span><span style="color: #008000;">是因为, 虽然宽高度为0, 但在IE6下会具有默认的 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;  <span style="color: #008000;">/*</span><span style="color: #008000;"> 字体大小和行高, 导致盒子呈现被撑开的长矩形 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FF9600 #3366ff #12ad2a #f0eb7a</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;">solid</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;">20px</span>;
}

登入後複製

示例3：

示例2中可以看到有4个三角形了，如果把4种颜色，只保留一种颜色，余下3种颜色设置为透明或者与背景色相同，那就形成一个三角形。

<span style="color: #800000;">#test3 </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FF9600 transparent transparent transparent</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;">solid</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;">20px</span>;
}

登入後複製

示例4：

示例3中，在IE6下，需要设置余下三边的border-style为dashed，即可达到透明的效果。

<span style="color: #800000;">#test4 </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FF9600 transparent transparent transparent</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;">solid dashed dashed dashed</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;">20px</span>;
}

登入後複製

示例5：

上述画的小三角的斜边都是依靠原来盒子的边，还有另一种形式的小三角，斜边在盒子的对角线上。

<span style="color: #800000;">#test5 </span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;">#FF9600 #3366ff transparent transparent</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;">solid solid dashed dashed</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;">40px 40px 0 0 </span>;
}

登入後複製

保留其中一种颜色，就可以得到斜边在对角线上的三角形了。

实现圆角效果

可以实现近似圆角，其实是一个非常小的梯形展示出来的。

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
.test</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.test .top</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">194px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent transparent #FF9600 transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">*border-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">pink pink #FF9600 pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">dashed dashed solid dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">chroma(color=pink)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.test .center</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FF9600</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.test .bottom</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">194px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">5px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FF9600 transparent transparent transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">*border-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FF9600 pink pink pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">solid dashed dashed dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">chroma(color=pink)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="top"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bottom"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>

登入後複製