5  边框属性

边框属性用于设置一个元素的边框风格、边框宽度、边框颜色,可以一起设置4条边的边框,也可对上边框、右边框、下边框和左边框单独设置。分别介绍如下。

a.边框风格属性

可以通过边框风格属性border-style设定上、下、左、右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1~4个关键字,如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果给出一个值,它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格,它们可以使用的属性值、解释和效果如图1所示。

图1  边框风格的属性值、解释和效果图

例句如下所示:

b.边框宽度属性

可以通过边框宽度属性border-width设定上、下、左、右边框的宽度,该属性用1~4个值来设置元素的边界,值是一个关键字或长度,不允许使用负值长度。如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果只给出一个值,它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值,还可以用medium(默认值)、thin(比medium细)或thick(比medium粗)值。例句如下所示:

c.边框颜色属性

可以通过边框颜色属性border-color设定上、下、左、右边框的颜色,可以使用1~4个关键字。如果4个值都给出了,则它们分别应用于上、右、下和左边框的样式。如果给出一个值,则它将被运用到各边上。如果给出了两个或三个值,则省略了的值与对边相等。例句如下所示:

d.略写的边框属性

CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、样式和颜色的略写,它包含border-width、border-style和border-color属性。例句如下:

p {border:5px solid gray;}   /* 设置段落元素的4个边框为直线式边框、5像素宽的灰色 */

边框属性border只能设置4种边框,也只能给出一组边框的宽度和样式。为了给出一个元素的4种边框的不同的值,网页制作者必须使用一个或更多的属性,如上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框样式、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5

    CSS综合实例 在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

    4  结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

随机推荐

  1. 服务网格数据平面的关键:层层剖析Envoy配置

    Envoy是一种高性能C++分布式代理,专为单个服务和应用程序设计.作为Service Mesh中的重要组件,充分理解其配置就显得尤为重要.本文列出了使用Envoy而不用其他代理的原因.并给出了Env ...

  2. PostgreSQL 、springboot 、spring data jpa 集成

    项目地址:https://gitee.com/zhxs_code/PostgreSQL_springboot_jpa_demo.git 增删查改都已经实现. 重点部分: 1.定义自己的方言. pack ...

  3. pipelineDB学习笔记-2. Stream (流)

    一.流的定义: 所谓的“流”(stream)在pipelineDB中是指那些被允许的数据库客服端推送到 Continuous View(连续视图) 的时序化数据的一种“抽象”.流中的每一个raw(数据 ...

  4. JavaEE基础(06):Servlet整合C3P0数据库连接池

    本文源码:GitHub·点这里 || GitEE·点这里 一.C3P0连接池 1.C3P0简介 C3P0是一个开源的JDBC连接池,应用程序根据C3P0配置来初始化数据库连接,可以自动回收空闲连接的功 ...

  5. python GUI编程tkinter示例之目录树遍历工具

    摘录 python核心编程 本节我们将展示一个中级的tkinter应用实例,这个应用是一个目录树遍历工具:它会从当前目录开始,提供一个文件列表,双击列表中任意的其他目录,就会使得工具切换到新目录中,用 ...

  6. Csharp: TreeList Drag and Drop

    /// <summary> /// https://www.codeproject.com/articles/3225/treelistview /// https://www.codep ...

  7. CentOS自行编译升级Git

    上一篇升级Git的方式是通过更改yum的源,然后通过yum来安装,那么对于喜欢折腾的人来说,怎么通过Git的源代码自行安装呢? 我安装的是CentOS-7-x86_64-1908,自带的git是1.8 ...

  8. 计算属性computed

    computed 在Vue中有多种方法为视图设置值: 1.使用指令直接将数据值绑定到视图 2.使用简单的表达式对内容进行简单的转换 3.使用过滤器对内容进行简单的转换 除此之外,我们还可以使用计算属性 ...

  9. Centos7部署mysql

    安装mysql yum install mysql mysql-server 会出现以下错误: [root@yl-web yl]# yum install mysql-server Loaded pl ...

  10. SpringBoot2.0整合WebSocket,实现后端数据实时推送!

    之前公司的某个系统为了实现推送技术,所用的技术都是Ajax轮询,这种方式浏览器需要不断的向服务器发出请求,显然这样会浪费很多的带宽等资源,所以研究了下WebSocket,本文将详细介绍下. 一.什么是 ...