第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属性。

如下例所示:

Tips:You can change the code before run.

缩写[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%的人还看了以下文章

  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    11.9K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    3.5K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    6.5K0
  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    14.2K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    3.0K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    3.2K0

发表回复

登录后才能评论