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

php中文网
发布: 2016-06-24 12:33:38
原创
1883人浏览过

在 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

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号