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. 用ConfigurationManager读取和修改配置文件

    为了方便有时我们会把一些简单的配置的信息放入web.config文件里. 放到appSettings添加key   value等信息. ConfigurationManager.AppSettings ...

  2. JS 之如何在插入元素时插在原有元素的前面而不是末尾

    语法: 父级.insertBefore(新元素,被插入的元素):          //在指定的元素前面加入一个新元素 父级.insertBefore(新元素,父级.children[0]); //在 ...

  3. hdu 5534 Partial Tree 背包DP

    Partial Tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  4. c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe

    把彩色图片转换为灰色的图片,直接用.net接口遍历每个像素点转换的效率非常低,800K的图片65万像素我的电脑要用5分钟,而用了unsafe,速度提高了几千倍,同样的图片只用了0.几秒 附一个常用的遍 ...

  5. android149 360 程序锁输入密码

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. SHELL 详解

    http://blog.csdn.net/vah101/article/details/6173488 ( a=2;b=4;c=9; ) 子shell 环境 { a=2;b=4;c=9; } 当前sh ...

  7. 配置Windows Live Writer,写cnblogs博客

    引言        以前写博客一般都是联网在cnblogs上面写,不好的地方就是不联网就写不了,当然我们也可以先记录在word文件,等联网在从word里面拷贝出来发布到cnblogs上面,但是样式这些 ...

  8. Ruby on Rails Tutorial 第一章 之 Git项目管理

    1.安装和设置 (1)git的安装(略) (2)初始化设置 $ git config --global user.name "LihuaSun" $ git config --gl ...

  9. Linux shell 脚本攻略之根据扩展名切分文件名

    摘自:<Linux shell 脚本攻略>Page61-62  

  10. Android防微信首页左右滑动切换

    大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰ ...