<!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. ASP.NET Core MVC 之依赖注入 Controller

    ASP.NET Core MVC 控制器应通过构造函数明确地请求它们地依赖关系,在某些情况下,单个控制器地操作可能需要一个服务,在控制器级别上的请求可能没有意义.在这种情况下,也可以将服务作为  Ac ...

  2. python（自用手册）导图

  3. 腾讯PCG（后台开发） 牛客网视频面试 一面

    腾讯视频面试 作为一个小渣渣记录一下,腾讯是我一直想进的公司,但其实准备的时间不是很长,也不是科班还是存在很大的劣势,记录一下找工作的经历. 首先说一下,这是我第一次视频面试,还是蛮紧张的.不过面试官 ...

  4. PostgreSQL入门教程（命令行）

    初次安装完成后 1.默认生成一个名为postgres的数据库 2.一个名为postgres的数据库用户 3.这里需要注意的是,同时还生成了一个名为postgres的Linux系统用户. 下面,我们使用 ...

  5. 一句道破所有的springmvc（面试必备）

    springmvc流程 : URL--------前端控制器DispatcherServlet---------HandlerMapping处理器映射器-------调用HandlerAdapter处 ...

  6. Linux Web集群架构详细(亲测可用!!!)

    注意:WEB服务器和数据库需要分离,同时WEB服务器也需要编译安装MySQL. 做集群架构的重要思想就是找到主干,从主干区域向外延展. WEB服务器: apache nginx  本地做三个产品 de ...

  7. JS如何重写一个函数

    分享一些自己在开发上遇到的问题,比如我们页面上用了大量的打印语句,但是在某些时候,我们不想要了. 解决方案1 : 我们删除这里的代码,如果太多了,那工作量太大好累,想想都不想干 解决方案2 :我们将c ...

  8. 分布式事务TransactionScope所导致几个坑

    记录一下,个人见解,欢迎指正 错误: 1.该伙伴事务管理器已经禁止了它对远程/网络事务的支持. (异常来自 HRESULT:0x8004D025)2.事务已被隐式或显式提交,或已终止3.此操作对该事务 ...

  9. PHP 与 MySQL 相关操作

    一.MySQL基操 •MySQL启动 注意:MySQL不能直接通过 mysql.exe 命令启动 MySQL客户端访问服务端需要寻找匹配:连接认证 连接:IP和端口确定,如果是本地都可以忽略 -h 主 ...

  10. JVM宏观认知&&内存结构

    JVM宏观认知 1.什么是虚拟机? 虚拟机是一种软件. 可分为系统虚拟机(仿真物理机)和程序虚拟机(执行单个计算机程序,比如JVM). 2.什么是Java虚拟机(JVM)? JVM是一种将字节码转化为 ...