<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class1{
border-style: dotted;
height: 20px;
}
.class2{
border-style:dashed dotted;
height: 20px;
}
.class3{
border-style: dashed dotted double;
height: 20px;
}
.class4{
border-style: dashed dotted double groove;
height: 20px;
}
</style>
</head> <body bgcolor="aquamarine">
<p class=class1></p>
<p class=class2></p>
<p class=class3></p>
<p class=class4></p>
</body> </html>

对边框的设置有综合属性:border-style,亦可运用其他四个属性分别对边框的边进行设置。

边框宽度设置:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.class1{
border-style: dotted;
border-width: 2px;
height: 20px;
}
.class2{
border-style:dashed dotted;
border-width: 2px 4px;
height: 20px;
}
.class3{
border-style: dashed dotted double;
border-width: 2px 4px 6px;
height: 20px;
}
.class4{
border-style: dashed dotted double groove;
border-width: 2px 4px 6px 8px;
height: 20px;
}
</style>
</head> <body bgcolor="aquamarine">
<p class=class1></p>
<p class=class2></p>
<p class=class3></p>
<p class=class4></p>
</body> </html>

CSS——边框设置的更多相关文章

  1. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  2. 来看下css边框阴影怎么设置?这些方法掌握后工作更轻松

    我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影.立体等效果.但是如果一些基础效果都需要用p图来完成那就显得效率比较低了.其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下. 在 ...

  3. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  4. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  5. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  6. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...

  7. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  8. CSS 边框

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值: ...

  9. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

随机推荐

  1. spring boot 打 war包

    spring boot .spring cloud打 war包,并发布到tomcat中运行 1.pom文件修改 <packaging>war</packaging> 2.< ...

  2. MBR和EFI启动过程

    MBR启动过程 BIOS-->MBR(主引导记录)-->DPT(硬盘分区表)-->DBR(分区引导扇区)-->BootMgr-->BCD-->Winload.exe ...

  3. 性能测试学习第四天-----loadrunner:jdbc批量制造测试数据 & controller应用

    Javavuser协议 1.过程概述:在eclipse中用java编写sql执行脚本,复制到lr中,调整后通过参数化迭代批量制造测试数据: 2.步骤: 1).在eclipse中新建java proje ...

  4. Linux - 通过expect工具实现脚本的自动交互

    目录 1 安装expect工具 2 expect的常用命令 3 作用原理简介 3.1 示例脚本 3.2 脚本功能解读 4 其他脚本使用示例 4.1 直接通过expect执行多条命令 4.2 通过she ...

  5. java学习之- 线程继承Thread类

    标签(空格分隔): 线程 在java.lang包中有个Thread子类,大家可以自行查阅文档,及范例: 如何在自定义的代码中,自定义一个线程呢? 1.通过对api的查找,java已经提供了对线程这类事 ...

  6. Python源码学习Schedule

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...

  7. React项目升级遇到的问题复盘(2019-09-02)

    老铁们,发没发现我换了个贼帅的头像,高端大气上档次,非洲大地我最凶!可把我自己牛逼坏了. 不扯啦不扯啦,抓紧进入今天的正题,从今天开始我会每天写一下每天工作的出现的问题,主要对这些问题出现的原因,以及 ...

  8. 【linux】【qt5】【信号槽示例】

    什么叫信号槽: 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目的的, ...

  9. HTML(一)简介,元素

    HTML简介 html实例: <!DOCTYPE html> 菜鸟教程 我的第一个标题 我的第一个段落 实例解析: <!DOCTYPE html> 声明为 HTML5 文档,不 ...

  10. HDU-2795Billboard+对宽度建立线段树

    参考:  https://blog.csdn.net/qiqi_skystar/article/details/49073309 传送门:http://acm.hdu.edu.cn/showprobl ...