CSS+DIV之border属性.ppt

CSS+DIV之border属性 CSS+DIV之border属性 CSS+DIV之border属性 在 div层套入border边框是最常用的，它就像如同表格，可以将样式、文字、图片包装起来。border边框属性主要学习边框风格属性(border- style)、边框宽度属性(border-width)、边框颜色属性(border-color)，这三个属性可以对整个边框或者单边框架多样化设置。通过解剖学习的方法，将每一种属性分解出来，更好将基本属性学到位，学会简单的运用。 1.边框风格属性(border-style)，?????? 用来设定上下左右边框的风格，具体参数值有：none (没有边框)、dotted (点线式边框)、dashed (破折线式边框)、solid (直线式边框)、double (双线式边框)、groove (槽线式边框)、ridge(脊线式边框)、inset (内嵌效果的边框)、outset (突起效果的边框)，下面以最为常用的直线式边框为例，代码参考写法如下： htmlheadtitle徐果萍博客/titlestyle type=”text/css”.apple {border-style:solid;}/style/headbody?? div class = apple依葫芦画瓢学CSS+DIV(09)：强化border属性/div/body/html 　　2.边框宽度属性(border-width)，用来设定上下左右边框的宽度，具体参数值有： 　　medium (是缺省值)、thin (比medium细)、thick (比medium粗)、用长度单位定值；可用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。我比较喜欢用px的单位。以直线式1像素边框为例，代码参考写法如下： htmlheadtitle徐果萍博客/titlestyle type=”text/css”.apple {border-style:solid; border-width:1px;}/style/headbodydiv class = ”apple”依葫芦画瓢学CSS+DIV(09)：强化border属性/div/body/html 　　3.边框颜色属性(border-color)，用来设定上下左右边框的颜色，颜色值可参照调色板，示例以直线式1像素红色边框为例，代码参考写法如下： htmlhead? title徐果萍博客/titlestyle type=”text/css”???? .apple {border-style:solid; border-width:1px; border-color:red;}?? /style/headbody?? div class = apple依葫芦画瓢学CSS+DIV(09)：强化border属性/div/body/html 　　以上border边框属性是上下左右四个边框统一设定，当然也可分开设定。如右边框，只要将参数值变为：border-right, border-right-width, border-right-style, border-right-color。现举例如下，同样运用综合写法， htmlheadtitle徐果萍博客/titlestyle type=”text/css”.apple {border-top:1px solid red; border-right:2px double blue; border-bottom:1px solid red; border-left:2px double blue;}/style/headbodydiv class = ”apple”依葫芦画瓢学CSS+DIV(09)：强化border属性/div/body/html??????????????? ? * *