<!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. 解决Springboot整合ActiveMQ发送和接收topic消息的问题

    环境搭建 1.创建maven项目(jar) 2.pom.xml添加依赖 <parent> <groupId>org.springframework.boot</group ...

  2. Jvm内存泄漏

    内存泄漏和内存溢出的关系 内存泄露:指程序中动态分配内存给一些临时对象,但是对象不会被GC所回收,它始终占用内存.即被分配的对象可达但已无用. 内存溢出:指程序运行过程中无法申请到足够的内存而导致的一 ...

  3. 解决问题：安装Ubuntu时遇到nouveau sched_error问题

    当我们在为有独立显卡gpu的电脑安装Ubuntu系统时,有可能会遇到nouveau sched_error问题. 方法一:安装系统时,开机出现dell图标时长按F12进入启动项选择界面, 然后选择UE ...

  4. SpringBoot 异步输出 Logback 日志

    一.介绍 1.1 Logback Logback是由log4j创始人设计的另一个开源日志组件,它分为下面下个模块: logback-core:其它两个模块的基础模块 logback-classic:它 ...

  5. 神经网络 OCR 参考

    1. https://blog.csdn.net/u010159842/article/details/87271554 2. https://blog.csdn.net/weixin_4286104 ...

  6. 初学HTML5做的小知识点

    新增的HTML5标签 语义化标签 :<header> 头标签      <nav> 导航标签      <section> 表示文档的结构.栏目      < ...

  7. Java性能测试从入门到放弃-详解篇

    Jmeter组件分类说明 Jmeter的组件可以放在任意位置 线程池:用于创建线程.每个线程会"批次顺序"执行任务,因此后面的任务可根据前面的任务决定具体的操作.          ...

  8. 感受一下.net中用 lambda与 linq 做数据集过滤的不同

    lambda: ids.Add( _hahahacontext .hahahamodel .FirstOrDefault( a => //lambda做过滤 a.name == "张宏 ...

  9. 在.net core web网站中添加webSocket支持

    注意:前置条件,操作系统 windows 8 以上,IIS Express 8.0 以上. 第1步:在Startup.cs文件的头部添加如下引用: using System.Net.WebSocket ...

  10. java虚拟机10.内存模型与线程

    多任务处理在现代计算机操作系统中是一项必备的功能,让计算机同时去做几件事情,不仅是因为计算机的运算能力强大了,更重要的原因是计算机的运算速度与它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘 ...