元素的边框(border)是围绕元素内容和内边距的一条或多条线

CSS border 属性允许你规定边框的样式 宽度和颜色

CSS 边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

边框颜色用 border-color 属性来设置 相对应的右 border-top-color border-right-color border-bottom-color border-left-color

边框的宽度 border-wiath属性来设置 对应的也有四个边框的宽度属性 border-right-weight ......

例子

<html>

<head>

<style type="text/css">

p

{

border: medium double rgb(250,0,255)

}

</style>

</head>

<body>

<p>Some text</p>

</body>

</html>

CSS  边框属性

HTML 学习笔记 CSS样式（边框）的更多相关文章

  1. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  2. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  3. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  4. HTML 学习笔记 CSS样式（链接）

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  5. HTML 学习笔记 CSS样式（字体）

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  6. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  7. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  8. 学习笔记 css样式

    大小 width:宽度  height:高度 背景 background-color  背景色   background-image  背景图片     background-repeat  背景平铺 ...

  9. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

随机推荐

  1. UITableView增加和删除、移动

    复习一下: 1.在控制器上添加一个UITableView,  暂时该UITableView控件变量名命名为为tableView, 设置控件代理,实现控制器的UITableViewDataSource, ...

  2. 调用meitu秀秀.so文件实现美图功能

    本文属于实战系列,是对<Android C代码回调java方法>等文的实践,调用meitu秀秀的libmtimage-jni.so文件来实现图片的美化功能 首先反编译得到/libmtima ...

  3. 【iOS】Mac下SVN的服务器搭建

    在协同开发中,版本控制是必备的.完全不敢想象团队都在用U盘.QQ管理代码的景象.但是svn不像git,拥有众多免费的代码库,如果在同 一局域网下,搭建svn服务端来同步代码是很有必要的.本文将详细讲解 ...

  4. 1.10 基础知识——GP3.1 制度化 & GP3.2 收集改进信息

    摘要: GP3.1是要求建立组织级的关于该过程的制度.标准.模版等全套体系,要求覆盖该PA所有的SP和GP.GP3.2 体现的是持续改进,每个过程都应该收集相应的改进信息. 正文: GP3.1 Est ...

  5. CentOS添加新硬盘到新的分区(xfs/ext4) 或者添加新分区

    CentOs添加新硬盘到新的分区(xfs/ext4)  添加新分区 转载请注明:http://www.cnblogs.com/juandx/p/5618162.html 这篇文章介绍怎么添加一块新的硬 ...

  6. 单元测试中如何配置log4net

    按道理来说,单元测试中基本没有对于日志的需求,这是由于单元测试的定位来决定的. 因为单元测试的思想就是针对的都是小段代码的测试,逻辑明确,如果测试运行不通过,简单调试一下,就能很容易地排查问题.但是单 ...

  7. php 升级到 5.3+ 后出现的一些错误，如 ereg(); ereg_replace(); 函数报错

    在php5.3环境下运行,常常会出现 Deprecated: Function ereg() is deprecated in...和Deprecated: Function ereg_replace ...

  8. 2. Docker - 安装

    一.Docker介绍 1. Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上, 也可以实现虚拟化. 容器时完全使用沙 ...

  9. Java 代码的基本知识（摘）

    (摘自:Java经典入门教程) http://wenku.baidu.com/link?url=IoWI58cD5vzeHN-NL4pN7Gren-RfzydrhjDlETAByC9L-9ANinyL ...

  10. mysql 错误 1221 Incorrect usage of union and order by

    今天有个项目出现了问题 问题原因是union和order by 的问题.关于这个问题的解决方案可以猛击下面的链接. http://blog.csdn.net/gtuu0123/article/deta ...