Home  >  Article  >  Web Front-end  >  CSS+DIV之border属性_html/css_WEB-ITnose

CSS+DIV之border属性_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:33:381544browse

在 div层套入border边框是最常用的,它就像如同表格,可以将样式、文字、图片包装起来。border边框属性主要学习边框风格属性(border- style)、边框宽度属性(border-width)、边框颜色属性(border-color),这三个属性可以对整个边框或者单边框架多样化设 置。通过解剖学习的方法,将每一种属性分解出来,更好将基本属性学到位,学会简单的运用。

1.边框风格属性(border-style),
       用来设定上下左右边框的风格,具体参数值有:

none (没有边框)、dotted (点线式边框)、dashed (破折线式边框)、solid (直线式边框)、double (双线式边框)、groove (槽线式边框)、ridge(脊线式边框)、inset (内嵌效果的边框)、outset (突起效果的边框),下面以最为常用的直线式边框为例,代码参考写法如下:


徐果萍博客



  
依葫芦画瓢学CSS+DIV(09):强化border属性


  2.边框宽度属性(border-width),用来设定上下左右边框的宽度,具体参数值有:

  medium (是缺省值)、thin (比medium细)、thick (比medium粗)、用长度单位定值;可用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。我比较喜欢用px的单位。以直线式1像素边框为例,代码参考写法如下:



徐果萍博客



依葫芦画瓢学CSS+DIV(09):强化border属性


  3.边框颜色属性(border-color),用来设定上下左右边框的颜色,颜色值可参照调色板,示例以直线式1像素红色边框为例,代码参考写法如下:



徐果萍博客



  
依葫芦画瓢学CSS+DIV(09):强化border属性


  以上border边框属性是上下左右四个边框统一设定,当然也可分开设定。如右边框,只要将参数值 变为:border-right, border-right-width, border-right-style, border-right-color。现举例如下,同样运用综合写法,



徐果萍博客



依葫芦画瓢学CSS+DIV(09):强化border属性


  强化border属性,这是我自学时觉得应该掌握一些基础性的知识,因为这些代码最关键还是要学会 运用,光看代码是没有用的,要学会自己去写代码,去发现其中错误的写法,纠正一些常规的写法,这样才能加快手工写入代码的进程。下一课时,准备分享一些 font属性个人学习笔记的心得!

转自:http://hi.baidu.com/liheng666/blog/item/7fcef61b247f32ffaf5133f5.html

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn