CSS 盒子模型边框

学习过 HTML 的同学都知道,在 HTML 中,我们常使用表格来创建周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素.

每个 border 属性我们可以设置宽度,样式,以及颜色.下面我们就看看如何通过 border 属性来设置边框宽度,以及颜色:

CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。

可以通过如下的内容

td {border-style: solid; border-width: 15px 5px 15px 5px;}

同样,这里我们也可以设置单边边框的宽度,

border-top-width
border-right-width
border-bottom-width
border-left-width

下面我们在 CSS 文件中加入

 border-style: dashed;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;

下面是效果截图:

QQ截图20161011155442.png


说完宽度,我们再来看看颜色,设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值,分别是边框的四边(具体顺序自己可以试试)。可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:

在 CSS 文档中添加以下内容:

  border-color: blue rgb(25%,35%,45%) #909090 red;

下面就是效果截图:

QQ截图20161011155448.png


同样可以使用属性控制各个边框的颜色,以达到相同的效果: border-top-color border-right-color border-bottom-color border-left-color

 


继续学习
||
<html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>注释:</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

弹指间学会HTML+CSS

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载