<!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. （十三）c#Winform自定义控件-导航菜单

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  2. spark读取pg数据库报错操作符不存在

    代码: Properties connectionProperties = new Properties(); connectionProperties.put("user", C ...

  3. Gradle 是什么

    写在前面的话,最近在系统的学习Gradle,本来想写一篇关于 Gradle 的介绍. 但在官网发现了这篇关于 Gradle 的介绍,已经介绍的很好了,我就很直接翻译过来了. 原文地址 https:// ...

  4. HBase 系列（十）—— HBase 的 SQL 中间层 Phoenix

    一.Phoenix简介 Phoenix 是 HBase 的开源 SQL 中间层,它允许你使用标准 JDBC 的方式来操作 HBase 上的数据.在 Phoenix 之前,如果你要访问 HBase,只能 ...

  5. unity_实用小技巧（const）

    const:声明某个常量字段或常量局部变量. 注意:常量字段和常量局部变量不是变量并且不能修改 利用const管理游戏标签 例如: //管理所有标签    public const string Pl ...

  6. CodeForces 1058E

    题意略. 思路:本题有两个关键点: 一.满足题设的区间条件 1.区间内1的个数和为偶数 2.区间内含1个数最多的那一项,它所含1的个数不得超过区间内1的个数和的一半. 二.长度超过60的区间必然满足上 ...

  7. 计算机基础+python初阶

    今日内容: 1.计算机基础知识 2.python简介 3.快速入门 今日内容: 一.计算机基础 1. 计算机什么组成的 输入输出设备 cpu 硬盘 内存 中央处理器 处理各种数据 相当于人的大脑 内存 ...

  8. Leetcode之深度优先搜索（DFS）专题-695. 岛屿的最大面积（Max Area of Island）

    Leetcode之深度优先搜索(DFS)专题-695. 岛屿的最大面积(Max Area of Island) 深度优先搜索的解题详细介绍,点击 给定一个包含了一些 0 和 1的非空二维数组 grid ...

  9. 试试 IEnumerable 的 10 个小例子

    IEnumerable 接口是 C# 开发过程中非常重要的接口,对于其特性和用法的了解是十分必要的.本文将通过10个小例子,来熟悉一下其简单的用法. 全是源码 以下便是这10个小例子,响应的说明均标记 ...

  10. VMware虚拟机安装Linux系统详细教程

    VMware14虚拟机安装RedHad6系统步骤 redhat网盘资源:链接:https://pan.baidu.com/s/1GlT20vevqbZ9qTxsGH1ZzA 提取码:oh57 如果网盘 ...