一、第一层次（复合样式）

<style>

    p.one{border:1px solid black;}

    /*边框:1像素 实心的 黑色；*/

</style>

<body>

    <p class="one">边框:1像素 实心的 黑色;</p>

</body>

　　　　运行效果图:

二、第二层次（边框三要素：宽度、样式、颜色）

　　2.1、边框宽度

<style>

    p.one{

        border:1px solid black;

        border-width:10px 20px 30px 40px;

    }

    /*边框宽度:上 右 下 左；*/

</style>

<body>

    <p class="one">边框宽度:上 右 下 左；</p>

</body>

　　运行效果图:　　

　　2.2、边框样式

<style>

    p{border-width:10px;}

    p.none {border-style:none;}

    p.dotted {border-style:dotted;}

    p.dashed {border-style:dashed;}

    p.solid {border-style:solid;}

    p.double {border-style:double;}

    p.groove {border-style:groove;}

    p.ridge {border-style:ridge;}

    p.inset {border-style:inset;}

    p.outset {border-style:outset;}

    p.hidden {border-style:hidden;}

</style>

<body>

    <p class="none">无边框none</p>

    <p class="dotted">虚线边框dotted</p>

    <p class="dashed">虚线边框dashed</p>

    <p class="solid">实线边框solid</p>

    <p class="double">双边框double</p>

    <p class="groove"> 凹槽边框groove</p>

    <p class="ridge">垄状边框ridge</p>

    <p class="inset">嵌入边框inset</p>

    <p class="outset">外凸边框outset</p>

    <p class="hidden">隐藏边框hidden</p>

</body>

　　运行效果图：

　　2.3、边框颜色

　　　　支持三种形式：name - 指定颜色的名称，如 "red" ； RGB - 指定 RGB 值, 如 "rgb(255,0,0)"  ；Hex - 指定16进制值, 如 "#ff0000"。

　　　　　　　　　　　另外，也可以设置为"transparent"，与父级颜色一致，可以理解为透明。

<style>

    p{width:400px;border-width:10px;border-style:solid;}

    p.red {border-color:red;}

    p.green {border-color:rgb(0,155,0);}

    p.blue {border-color:#3366FF;}

</style>

<body style="background: #ccc;">

    <p class="red">红色边框</p>

    <p class="green">绿色边框</p>

    <p class="blue">蓝色边框</p>

</body>

　　　　运行效果图：

　　2.4、边框的宽度|样式|颜色，分别可以设置一至四个值。下面以边框样式为例：

三、第三层次（方向）

　　　　

<style>

    p{width:400px;height:200px;}

    /*方向复合样式*/

    .one{

        border-top:1px solid #000;

        border-right:2px dotted red;

        border-bottom:3px solid deeppink;

        border-left:4px dashed green;

    }

    /*方向分层样式 可以同样的方式设置*/

    .two{

        border-top-width:1px;

        border-top-style:solid;

        border-top-color:#000;

        border-right-width:2px;

        border-right-style:dotted;

        border-right-color:red;

        border-bottom-width:3px;

        border-bottom-style:solid;

        border-bottom-color:deeppink;

        border-left-width:4px;

        border-left-style:dashed;

        border-left-color:green;

    }

</style>

<body>

    <p class="one">方向复合样式</p>

    <p class="two">方向分层样式 可以同样的方式设置</p>

</body>

　　　　运行效果图：

四、注意事项

　　在【同一个容器】下四条边框【相邻】且【颜色不一样时】,会出现梯形。

<style>

    div{

        width: 200px;

        height: 70px;

        border-width: 20px;

        border-style: solid;

        border-color: yellow green blue black;

    }

</style>

　　　　运行效果如图：

　　　　利用边框的这一特性，我们可以做出三角形。

<style>

    div{

        width: 0;

        height: 0;

        overflow: hidden;

        border-width: 100px;

        border-color: transparent transparent #ccc transparent;
　　　　 border-style: dashed dashed solid dashed;

    }

</style>

　　　　运行效果如图：

五、兼容

　　1、边框宽度（border-width）、边框颜色（border-color）、边框方向（border-top|right|bottom|left）以及复合样式|分层样式，全兼容。

　　2、边框样式（border-style）：

　　　　2.1、IE6支持solid、dashed、2px以上的dotted(1px不支持，截图平铺解决)、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。

　　　　2.2、标准浏览器以及IE7以上，支持solid、dashed、dotted、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。

border——边框属性的更多相关文章

  1. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

  2. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  3. CSS .css边框属性（border）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  5. border边框的宽度/样式/颜色 全部值

    border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...

  6. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  7. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  8. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  9. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

随机推荐

  1. java框架之Shiro-安全/权限框架

    准备 简介 Apache Shiro 是 Java 的一个安全(权限)框架. Shiro 不仅可以用在 JavaSE 环境,也可以用在 JavaEE 环境. Shiro 可以完成:认证.授权.加密.会 ...

  2. 这10个Python项目超有趣！

    前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...

  3. 2018-2019-1 20189203 《Linux内核原理与分析》第七周作业

    第一部分 实验 增加fork命令,运行MenuOS 如下: 设置断点: 跟踪调试过程: 停在的do_fork()的位置上 停在copy_process 停在dup_task_struct 停在copy ...

  4. node(03)--利用 HTTP 模块 URl 模块 PATH 模块 FS 模块创建一个 WEB 服务器

    Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等 Web 客户端提供文档,也可以放置网站文件,让全世界浏览:可以放置数据文件,让全世界下载.目前最主流的三个 We ...

  5. phpstudy----------如何将phpstudy里面的mysql升级到指定版本，如何升级指定PHP版本

    1.下载指定版本:从官网上下载高版本的 MySQL :https://dev.mysql.com/downloads/file/?id=467269,选的版本是 5.7.17 2.请注意第四部以前是可 ...

  6. JavaScript 原型链学习（三）原型对象存在的问题 与 组合使用构造函数和原型

    原型对象也不是没有缺点.首先,它省略了为构造函数传递初始化参数这一环节, 结果所有实例在默认情况下都将取得相同的属性值.虽然这会在某种程度上带来一些不方便, 但还不是原型对象的最大问题.原型对象的最大 ...

  7. Linux基础命令---lp打印文件

    lp lp指令用来打印文件,也可以修改存在的打印任务.使用该指令可以指定打印的页码.副本等. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE.SU ...

  8. P1744 采购特价商品 最短路径

    P1744 采购特价商品 图论-----最短路径算法 弗洛伊德算法  O(n^3) 代码: #include<iostream> #include<cstdio> #inclu ...

  9. zabbix 配置维护

    Centos 6.5, Zabbix 3.0.4 在配置了邮件报警后,如果正常的软硬件变更(比如发版)也不停的发邮件肯定很烦,这个时候就需要在操作前挂上维护: 浏览器登录zabbix后台,Config ...

  10. CentOS 6.5优化开机启动服务

    使用chkconfig命令列举出所有服务,配合管道筛选出开机默认启动的服务,再去掉level0(关机).level4(无意义)和level6(重启)的显示,使结果更直观. chkconfig | gr ...