可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别用于上、右、下和左边框的样式

如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等

也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格

各边的风格使用的属性值
none：没有边框，无论边框宽度设置为多大
dotted：点线式边框
dashed：破折线式边框
solid：直线式边框
double：双线式边框
groove：槽线式边框
ridge：脊线式边框
inset：内嵌效果的边框
outset：突起效果的边框

 <!--
 可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别用于上、右、下和左边框的样式

 如果给出一个值，它将被运用到各边上。

 如果两个或三个值给出了，省略了的值与对边相等

 也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格

 各边的风格使用的属性值
 none：没有边框，无论边框宽度设置为多大
 dotted：点线式边框
 dashed：破折线式边框
 solid：直线式边框
 double：双线式边框
 groove：槽线式边框
 ridge：脊线式边框
 inset：内嵌效果的边框
 outset：突起效果的边框
 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>边框风格属性</title>
 <style>
     h1{
         border-style:solid;
         border-width:10px 20px 30px 40px;
         border-color:red blue yellow green;
     }
     h2{
         border-style:double solid inset dotted;
     }
     h3{
         border-top-style:solid;
         border-bottom-style:outset;
     }
 </style>
 </head>

 <body>
     <h1>wwwwwwwwwwwwwwwww</h1>
     <h2>wwwwwwwwwwwwwwwww</h2>
     <h3>wwwwwwwwwwwwwwwww</h3>
 </body>
 </html>

HTML中的边框属性的更多相关文章

  1. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  2. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  3. css中的border-collapse属性如何设置表格边框线？（代码示例）

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  4. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

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

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

  8. border边框属性

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

  9. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

随机推荐

  1. python中Url链接编码处理（urlencode,urldecode）

    做完了flask-web应用,这几天想用爬虫做个好玩的电影链接整合器,平时找电影都是在dytt或者dy2018之类的网站,在用dytt搜索电影<美国队长时>,发现他的搜索链接是这样的:ht ...

  2. Linux基础: 挂载镜像文件(Mount & ISO)

    ISO/Ghost 镜像文件概念(裸机安装,无光驱安装,跨平台安装) ISO是镜像文件:所谓镜像文件其实和ZIP压缩包类似,它将特定的一系列文件按照一定的格式制作成单一的文件,以方便用户下载和使用,例 ...

  3. nyoj------20吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3    描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市 ...

  4. 重载Array类的contains方法

    var allFilters = self.filtersContainer?.filters ?? [OpalFilter]() if let sorter = filtersContainer?. ...

  5. 简述 Ruby 与 DSL 在 iOS 开发中的运用

    阅读本文不需要预先掌握 Ruby 与 DSL 相关的知识 何为 DSL DSL(Domain Specific Language) 翻译成中文就是:"领域特定语言".首先,从定义就 ...

  6. Struts2动态结果(${})and全局结果(global-results)

    动态结果 例:根据判定动态结果区分用户进行登录 1.先在TestAction类中进行判定赋值 public class TestAction extends ActionSupport { priva ...

  7. FileUpload上传与下载

    后台代码: public string connstr = "server=128.1.3.113;database=test;uid=sa;pwd=pass"; protecte ...

  8. Could not find artifact com.sun:tools:jar:1.5.0

    问题: Failed to execute goal on project petroleum: Could not resolve dependencies for project petroleu ...

  9. wordpress 中禁止更新提示

    前言: 在此之前每每打开blog的时候总是有那么个数字在那边显示,如果是很重要的更新显示在那也就算了,有时候就算一个破主题他还一直在那边,很是让小猪纠结.最关键的是要是更新了主题,那么之前所有自定义的 ...

  10. POJ 1503 Integer Inquiry 大数 难度:0

    题目链接:http://poj.org/problem?id=1503 import java.io.*; import java.math.BigInteger; import java.util. ...