CSDN博客变形小技巧之四

CSDN博客变形小技巧之四

---

By DaNmarner  http://blog.csdn.net/DaNmarner  DaNmarner@gmail.com
欢迎转载，请注明作者和出处！

---

下面探讨一下边框。

 

keso皮肤主要由三个部分组成，最上面的横幅（header），文章部分（main）和一侧的导航栏（rightmenu）。通过CSS可以自由设置它们边框的颜色和粗细。

在开始以前，有必要介绍一点CSS的知识。CSS（Cascading style sheets）是一种设计网页样式的工具。它的基本结构如下：

选择符{

      属性:属性值

}

这种C语言风格的代码学过编程语言的人看起来很亲切吧？

 在CSS里面有一些基本属性，其中一个就是边框。应用格式如下：

border : 边框宽度 样式 颜色;

 分别解释一下各个部分的含义。

border是属性名，对应CSS基本结构的“属性”，冒号后面的三项就是“属性值”。

边框宽度：最常用的单位是px，也就是像素。比如2px也就是宽度为两个像素。

样式：可用选项有 None / dotted / dash / solid / double / groove / ridge / inset / outset 含义可参照英文字面意思。

颜色：可以用 #xxxxxx 这样的十六进制代码表示，也可以用基本的red,pink,blue,yellow等等。

例如：

#header {
        border : 2px solid black;
}

这段代码的含义就是把横幅部分的边框设置为宽度2像素，实心，黑色。

如果需要对某一条边框单独设置，可以在属性border后面加上一个横扛，再在后面加上top,right,buttom或者right关键字。

比如将导航栏的左边框设置成1像素，点状，颜色#cccccc，代码如下：

#header {
        border-right : 1px dotted red;
}

边框样式的几个效果不妨自己探索一下。

width="468" scrolling="no" height="15" frameborder="0" allowtransparency="allowtransparency" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1391084545775812&dt=1188375788593&lmt=1188375782&format=468x15_0ads_al_s&output=html&correlator=1188375788578&channel=7913117752&url=file%3A%2F%2F%2FC%3A%2FDocuments%2520and%2520Settings%2FAdministrator%2F%E6%A1%8C%E9%9D%A2%2Faaa.htm&color_bg=FFFFFF&color_text=000000&color_link=000000&color_url=000000&color_border=FFFFFF&ga_vid=199681080.1188375789&ga_sid=1188375789&ga_hid=289079605&flash=9&u_h=768&u_w=1280&u_ah=738&u_aw=1280&u_cd=32&u_tz=480&u_java=true" marginheight="0" marginwidth="0" name="google_ads_frame">

<script type="text/javascript"> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

width="468" scrolling="no" height="60" frameborder="0" allowtransparency="allowtransparency" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1391084545775812&dt=1188375788953&lmt=1188375782&prev_fmts=468x15_0ads_al_s&format=468x60_as&output=html&correlator=1188375788578&channel=8802996721&url=file%3A%2F%2F%2FC%3A%2FDocuments%2520and%2520Settings%2FAdministrator%2F%E6%A1%8C%E9%9D%A2%2Faaa.htm&color_bg=FFFFFF&color_text=000000&color_link=000000&color_url=000000&color_border=FFFFFF&ad_type=text&cc=916&ga_vid=199681080.1188375789&ga_sid=1188375789&ga_hid=289079605&flash=9&u_h=768&u_w=1280&u_ah=738&u_aw=1280&u_cd=32&u_tz=480&u_java=true" marginheight="0" marginwidth="0" name="google_ads_frame">