border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-style:dotted solid double dashed;

border-style的属性方位有四个分别为上、右、下、左，那么相对应border-style的dotted solid double dashed分别表示为上边框是点状、右边框点线、下边框双线和左边框虚线，当我们只定义一个属性的时候则边框为这一种属性。若边框的样式为none或hidden，否则边框不会出现。

border-color边框颜色定义方法为“#123456”、 “rgb(123,123,123)”、“red”等。

border-width边框宽度，其属性有thin（薄）、medium（普通）和thick（厚）。如图：

下面例举一些常见的边框示例：

<head>
<style type="text/css">
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}
</style>
</head>

<body>
<p class="dotted">border</p>

<p class="dashed">border</p>

<p class="solid"border</p>

<p class="double">border</p>

<p class="groove">border</p>

<p class="ridge">border</p>

<p class="inset">border</p>

<p class="outset">border</p>
</body>

CSS之边框属性的更多相关文章

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

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

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

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

  3. css3设置边框属性

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

  4. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

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

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

  6. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

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

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

  8. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  9. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

随机推荐

  1. WinForm开发浏览器，WebBrowser获取页面内容，如何解决中文乱码

    WebBrowser的编码可以从文档对象中获得,将代码改为如下即可. System.IO.StreamReader getReader = new System.IO.StreamReader(thi ...

  2. Usage of readonly and const

    Many new learners can not make sure the usage scenarios of readonly and const keywords. In my opinio ...

  3. oracle备份恢复之rman恢复到异机

    注意事项: 1 此处实验环境为同平台,同字节序,同版本,源机器和目标机器相同的目录结构. 2 目标机器只需要安装oracle数据库软件即可. 3 第一次利用备份恢复测试环境,之后从源机器拷贝备份到目标 ...

  4. POJ 1979 dfs和bfs两种解法

      fengyun@fengyun-server:~/learn/acm/poj$ cat 1979.cpp #include<cstdio> #include<iostream&g ...

  5. 通过注册表查看已安装 .NetFramework 版本

    gci "hklm:\SOFTWARE\Microsoft\NET Framework Setup\NDP" | % {(Get-ItemProperty registry::$_ ...

  6. BZOJ 2456: mode 水题

    2456: mode Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php? ...

  7. Binder机制1---Binder原理介绍

    1.Binder通信机制介绍 这篇文章会先对照Binder机制与Linux的通信机制的区别,了解为什么Android会另起炉灶,採用Binder.接着,会依据Binder的机制,去理解什么是Servi ...

  8. iOS开发——UI篇OC篇&UITableView简单封装

    UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...

  9. mydumper原理3

    Mydumper介绍 Mydumper是一个针对MySQL和Drizzle的高性能多线程备份和恢复工具.开发人员主要来自MySQL,Facebook,SkySQL公司.目前已经在一些线上使用了Mydu ...

  10. 日志分析(三) kibana数据展示

    kibana最新版本支持自定义数据大盘了,今天试用了下,感觉非常棒.上图: 支持多维度定义视图,然后视图里面可以依据粗粒度维度进行图表归类.总之,比旧版本强大太多了.后面试试能否扩展加入耦合一定业务数 ...