第11课:边框(border)

边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。
border-width
border-color
border-style

边框宽度[border-width]

边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等,也可以是像素值。如下图所示:

border-width的示例

边框颜色[border-color]

颜色

CSS属性border-color用于定义边框的颜色。其值就是正常的颜色值,例如:“#123456”、 “rgb(123,123,123)”、“yellow”等。

边框样式[border-style]

边框样式有多种可供选择。下图显示了8种不同样式的边框在Internet Explorer 5.5里的实际显示效果。在这个例子里,我们为这8种边框都选择了“金色(gold)”作为边框颜色、“厚(thick)”作为边框宽度。当然,这只是个例子,你可以为边框设置别的颜色和厚度。

如果你不想有任何边框,可以为它取值为“none”或者“hidden”。

不同样式的边框

一些示例

我们可以将上面三个有关边框的CSS属性组合起来使用,从而制造出多种多样的变化。来举个例子,我们要为一个文档中的h1h2ulp等元素分别定义不同的边框。尽管其显示效果也许并不那么美观,但是它很好地向你展示了多种变化的可能:

h1 {border-width: thick;border-style: dotted;border-color:gold;}
h2 {border-width: 20px;border-style: outset;border-color: red;}
p {border-width: 1px;border-style: dashed;border-color: blue;}
ul {border-width: thin;border-style: solid;border-color: orange;}

我们也可以为上边框、下边框、右边框、左边框分别指定特定的CSS属性。

如下例所示:





第11课:边框(border)|www.125jz.com



125网页设计




缩写[border]

跟许多其他属性一样,你也可以将有关边框的CSS属性缩写为一个border属性。让我们看一个例子:

p {border-width: 1px;border-style: solid;border-color: blue;}

可被缩写为:

p {border: 1px solid blue;}

小结

在这一课,你学习了CSS提供的多种设置边框的方法。

在下一课,我们将了解如何在盒状模型中进行尺寸(高度与宽度)的定义。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5247.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 上午11:14
下一篇 2020年2月25日 下午3:14

99%的人还看了以下文章

  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    2.6K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.4K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.9K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1.4K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    2.2K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    2.1K0

发表回复

登录后才能评论