CSS border用于设置HTML元素(如div)的边框,包括边框的宽度、颜色和样式。本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下。

CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇

一、CSS边框基础知识

CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入码农教程提供CSS手册查看border

二、Html原始边框与CSS边框对照

Html表格控制边框:

border="1" bordercolor="#000000"

说明:控制表格边框宽度为1px,css颜色为黑色,默认为实线样式边框。

三、border边框语法

1、四个边框

border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

2、四边相同边框border简写

#manong{border:1px solid #00F}

设置了manong对象盒子1px像素蓝色实线边框

3、边框三个样式

通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

1)、边框颜色:border-color:#000

2)、边框厚度(宽度):border-width:1px

使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。

3)、border边框样式:border-style:solid

边框样式值如下:

none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid :  实线边框(常用)
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边

四、CSS单独设置左边框、右边框、上边框、下边框

以缩写方式写上、下、左、右边框单独CSS样式设置方法

1、1px黑色虚线上边框

border-top:1px dashed #000

2、1px黑色实线下边框

border-bottom:1px solid #000

3、1px黑色虚线左边框

border-left:1px dashed #000

4、1px黑色实线右边框

border-right:1px solid #000

五、常用推荐边框样式

我们通常使用主流浏览器兼容边框样式有:

1、实线边框:solid

Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。

2、虚线边框:dashed

Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。

六、css border边框用处

设置对象边框样式,设置单独上边框、下边框、左边框、右边框样式,实现美化美观。边框起到分割、规划布局作用。

七、css边框应用案例代码

描述:为了观察案例效果我们设置一个css宽度为200px,css高度1px,红色实线边框的DIV盒子

CSS代码:

#manong{height:100px;width:200px;border:1px solid #F00}

HTML代码对应片段:

<div id="manong">我的高度为100px,宽度为200px</div>

八、css边框border总结

我们使用CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码,CSS 边框优化简写,常见对对象设置CSS样式使用属性代码:border:1px solid #000;。

十一、css边框border设置技巧

如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。

CSS 代码:

border:1px solid #000; border-top:none;

注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。

相关阅读:

css 教程

html教程

css 参考手册

原文地址:http://www.manongjc.com/article/841.html

css border的更多相关文章

  1. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  2. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  3. CSS Border(边框)

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  4. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  5. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  6. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  7. CSS border系列

    本文更新版链接 一.border 关于border的3个属性,分别为border-width.border-style.border-color. 其中,border-color默认为元素内容的前景色 ...

  8. CSS border 属性和 border-collapse 属性

    border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 ...

  9. CSS border 生成三角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. HDU 4548:美素数

    Problem Description 小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识. 问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素 ...

  2. 2018-2019-2 20165212《网络对抗技术》Exp1 PC平台逆向破解

    2018-2019-2 20165212<网络对抗技术>Exp1  缓冲区溢出实验 实验点1:逆向及Bof基础实践 实践任务 用一个pwn1文件. 该程序正常执行流程是:main调用foo ...

  3. ppt罗列项排版

    关于罗列项的排版(1,....2,......3,......4,........)

  4. SQLite数据库学习小结——Frameworks层实现

    3. SQLite的Frameworks层实现 3.1 Frameworks层架构 Android系统方便应用使用,在Frameworks层中封装了一套Content框架,之所以叫Content框架而 ...

  5. Mysql_connect报告”No such file or directory”错误的解决方法

    写了个php脚本单独执行mysql_connect(),发现错误信息居然是“No such file or directory"! 首先确定是mysql_connect()和mysql_pc ...

  6. hasura graphql server event trigger 试用

    hasura graphql server 是一个很不错的graphql 引擎,当前版本已经支持event triiger 了 使用此功能我们可以方便的集成webhook功能,实现灵活,稳定,快捷的消 ...

  7. nyoj 三个水杯

    三个水杯 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有标识,只 ...

  8. summernote 如何设置为只读?

    从 summernote 的文档看到以下信息. disable, enable You can disable editor by API. $('#summernote').summernote(' ...

  9. Keepalived+HAProxy实现RabbtiMQ高可用的负载均衡

    HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案,包括Twitter,Reddit,StackOverflow,GitHub在 ...

  10. 【转】实战USB接口手机充电 看3.0/2.0谁更快

    原文网址:http://mb.it168.com/a2012/0816/1385/000001385641_all.shtml [IT168 应用]当下,越来越多的电脑都已普及USB 3.0接口,新买 ...