<!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. 防抖（debounce）和节流（throttle）

    场景说明:一般我们在前端页面中会给元素绑定click.scroll.onmousemove.resize等事件,这些事件的执行函数如果是去发请求获取数据的话,我们无意识的连续点击或者连续滚动会给服务器 ...

  2. 自然语言处理(NLP)的一般处理流程！

    1. 什么是NLP 自然语言处理 (Natural Language Processing) 是人工智能(AI)的一个子领域.自然语言处理是研究在人与人交互中以及在人与计算机交互中的语言问题的一门学科 ...

  3. vue-cli+v-charts实现移动端可视化图表

    v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个 ...

  4. 盘一盘 NIO （一）—— Buffer源码解析

    Buffer是个啥? Buffer 即缓冲区,用来暂存输入输出数据的区域.Buffer对象是一份固定数量的数据的容器,实质上是一个数组.但是一个缓冲区不仅仅是一个数组,缓冲区提供了对数据的结构化访问, ...

  5. urllib.request.urlretrieve()用于下载制定url内容到本地

    函数:urllib.urlretrieve(url[, filename[, reporthook[, data]]]) 参数说明: url:外部或者本地url ,url中不要含有中文,好像会出错.f ...

  6. 思科ACS5.8最新搭建教程-亲测可用

    1.需要准备的相关软件 ACS5.8安装包:http://ouo.io/MWB0R ACS5.8破解包:http://ouo.io/FaiGgj Centos7:下载地址(破解时需要):http:// ...

  7. HTML连载33-背景定位

    一.背景定位 同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色 1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置 ...

  8. unity之局域网

    Unity自5.1以后支持新版的网络系统Unet,Unet是什么,优缺点是什么,和以前的网络系统有什么区别,请自行去百度.本篇要实现的功能是创建网络游戏的Player主角,以及实现移动同步.本教程来源 ...

  9. 洛谷 P1514 【引水入城】

    题库 :洛谷 题号 :1514 题目 :引水入城 link :https://www.luogu.org/problemnew/show/P1514 思路 :搜索从第一排开始能覆盖最后一排的区间L ~ ...

  10. matplotlib 库的使用

    1.问题描述: 在学习kaggle经典学习项目Titanic,进行数据可视化处理时,对于每个特征进行相关性分析(也就是绘制pearson correlation heatmap )热力相关性矩阵时, ...