css 解决方案-边框

double lines

CSS code

.doubleline{border:3px double #ccc}

indented lines

HTML code

<ol id="indented" class="demo">    <li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></li>    <li><p>Aliquam tincidunt mauris eu risus.</p></li>    <li><p>Vestibulum auctor dapibus neque.</p></li>                   </ol>

CSS code

#indented{    background-color:#222;    width:400px;}#indented li{    border-top:1px solid #111;    border-bottom:1px solid #333;    color:#ccc;    line-height:1.8;    font-size:16px;    font-family:Tahoma;}#indented li p{    font-size:14px;    font-weight:normal;    margin:0;}

注：这里在写这个indented lines效果的时候，顺便加了点内容，就是如何控制ol前面的序列号，在这里我们能看到序列号的字体及大小和li内容都是不一样的，这里的方法主要是在li里面嵌套标签，然后设置li的字体及大小表现为序列号，而li内容的字体及大小由里面的嵌套标签来设置，当然这里不仅仅是设置字体及大小那么简单啊，还有变化出更多丰富的效果

pressed lines

HTML code

<div id="pressed" class="demo">    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>

CSS code

#pressed{    background-color:#222;    padding:10px;    width:380px;}#pressed p{    background-color:#111;    border:1px solid #353535;    border-color:#000 #353535 #353535 #000;    padding:10px;    color:#ccc;    margin-bottom:0;}

beveled lines

HTML code

<p class="beveled demo">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

CSS code

.beveled{    background-color:#555;    color:#fff;    outline:1px solid #111;    padding:10px;    border-top:1px solid #aaa;    width:380px;}

注：为了得到明白的效果所以用的颜色配起来不是很好。这里我们用outline来模拟边框，而是用border-top来实现beveled效果。其实这个还可以用css3的box-shadow来实现的哦，接下来我们使用css3来实现这种效果,用border来实现外面的边框，而box-shadow来模拟里面的beveled效果，当然css3来实现的话肯定是不兼容的呵呵

border制作三角形


HTML code

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

CSS code

.arrow-up {    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 5px solid black;}.arrow-down {    width: 0;    height: 0;    border-left: 20px solid transparent;    border-right: 20px solid transparent;    border-top: 20px solid #f00;}.arrow-left {    width: 0;    height: 0;    border-top: 10px solid transparent;    border-bottom: 10px solid transparent;    border-right:10px solid blue;}.arrow-right {    width: 0;    height: 0;    border-top: 30px solid transparent;    border-bottom: 30px solid transparent;    border-left: 30px solid green;}

注：以前不知道原来如果宽度和高度为0，border也可以组成一个框，然后明白了四个上下左右border组成一个框，老不明白这三个border是怎么用的，现在明白了原来三个边框也一样可以组成一个框啊。如果不明白原理可以自己在纸上画画，这个就像拼图似的，一个长方形或正方形可以分成四个三角形也可以分成三个三角形还可以分成两个三角形。不过分成两个的三角形还是不太常用，所以暂且不说，如果你感兴趣可以自己谷歌下啊。分割原理如下图：