原文

　　简书原文：https://www.jianshu.com/p/537a878304f2

大纲

　　1、border-style的值
　　2、利用border作图——基本图形
　　3、利用border作图——特殊图形

1、border-style的值

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>inline-block</title>

<style>

*{

    margin: 0;

    padding: 0;

}

div{

    margin:100px auto;

}

</style>

<link rel="stylesheet" href="styles.css" type="text/css"/>

</head>

<body>

<div>

</div>

</body>

</html>

div{

    width:100px;

    height:100px;

    border:20px green;

    border-style:solid;

}

不同的border-style的值获得的效果是不同的

1.1、solid：定义实线

1.2、double：定义双线，双线的宽度等于 border-width 的值

1.3、dotted：定义点状边框，在大多数浏览器中呈现为实线

1.4、dashed：定义虚线，在大多数浏览器中呈现为实线

1.5、groove：定义 3D 凹槽边框，其效果取决于 border-color 的值

1.6、ridge：定义 3D 垄状边框，其效果取决于 border-color 的值

1.7、inset：定义 3D inset 边框，其效果取决于 border-color 的值

1.8、outset：定义 3D outset 边框，其效果取决于 border-color 的值

2、利用border作图——基本图形

　　基本的html文件，基本图形在这个html中的div上创造

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>inline-block</title>

<style>

*{

    margin: 0;

    padding: 0;

}

div{

    margin:100px auto;

}

</style>

<link rel="stylesheet" href="styles.css" type="text/css"/>

</head>

<body>

<div>

</div>

</body>

</html>

2.1、给不同的边框设置不同的颜色

div{

    width:100px;

    height:100px;

    border-top:100px solid red;

    border-bottom:100px solid orange;

    border-left:100px solid green;

    border-right:100px solid blue;

}

2.2、将DIV的宽高设置为0

div{

    width:0;

    height:0;

    border-top:100px solid red;

    border-bottom:100px solid orange;

    border-left:100px solid green;

    border-right:100px solid blue;

}

2.3、梯形

div{

    width:100px;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    border-bottom:100px solid orange;

    border-left:100px dashed transparent;

    border-right:100px dashed transparent;

}

2.4、三角形

/*

    切记高度和宽度都要设置为0，通过边框的width来控制三角形的大小

    通过调整不同方向的边框显示颜色和邻近的边框的透明可以得到不同方向上的等腰三角形

    或者

    可以设置两个邻近边框，一个显示颜色一个不显示颜色从而形成不同方向上的直角三角形

*/

/*等腰三角形*/

div{

    width:0;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    border-bottom:100px solid orange;

    border-left:100px dashed transparent;

    border-right:100px dashed transparent;

}

/*直角三角形*/

div{

    width:0;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    border-bottom:100px solid orange;

    border-left:100px dashed transparent;

}

3、利用border作图——特殊图形

3.1、叠加三角形

<div class=box>

    <span class="arrow_1"></span>

    <span class="arrow_2"></span>

</div>

<!--

    设置不同方向的两个三角形从而叠加出不同方向的三角形箭头

-->

.box{

    position:relative;

}

.box span{

    width:0;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    position:absolute;

}

span.arrow_1{

    border-top:20px solid #beceeb;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-20px;

    z-index:1;

}

span.arrow_2{

    border-top:20px solid #ffffff;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-13px;

    z-index:2;

}

3.2、叠加两个相反方向的三角形

<div class="triangle-updown">

</div>

.triangle-updown {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid #669;

    position: relative;

    margin-bottom: 50px

}

.triangle-updown:after {

    content: " ";

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid #669;

    position: absolute;

    top: 50px;

    left: -50px;

}

3.3、利用椭圆形的叠加形成心形

.heart {

    width: 160px;

    height: 200px;

    position: relative

}

.heart:before {

    content: " ";

    border: 0 solid transparent;

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

    border-radius: 100px 100px 0 0;

    width: 80px;

    height: 120px;

    background: #669;

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

    position: absolute;

    left: 20px;

}

.heart:after {

    content: " ";

    border: 0 solid transparent;

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

    border-radius: 100px 100px 0 0;

    width: 80px;

    height: 120px;

    background: #669;

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

    position: absolute;

    left: 48px;

    top: 0px;

}

3.4、椭圆提示泡

.oval-pop {

    width: 200px;

    height: 100px;

    background: #669;

    -moz-border-radius: 100px / 50px;

    -webkit-border-radius: 100px / 50px;

    border-radius: 100px / 50px;

    margin-bottom: 50px;

    position: relative

}

.oval-pop:after {

    content: "";

    border: 0 solid transparent;

    border-bottom: 30px solid #669;

    -moz-border-radius: 0 0 0 200px;

    -webkit-border-radius: 0 0 0 200px;

    border-radius: 0 0 0 200px;

    width: 50px;

    height: 50px;

    position: relative;

    margin-top: 20px;

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    position: absolute;

    top: 50px;

    left: 20px

}

3.5、对话框1

<div class=box>

    <span class="arrow_1"></span>

    <span class="arrow_2"></span>

    hellos

</div>

.box{

    width:300px;

    padding:30px 20px;

    border:5px solid #beceeb;

    position:relative;

}

.box span{

    width:0;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    position:absolute;

}

span.arrow_1{

    border-top:20px solid #beceeb;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-20px;

    z-index:1;

}

span.arrow_2{

    border-top:20px solid #ffffff;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-13px;

    z-index:2;

}

3.6、对话框2——伪类

<div class=box>

    <span>hellos</span>

</div>

.box{

    width:300px;

    padding:30px 20px;

    border:5px solid #beceeb;

    position:relative;

}

.box:after,.box:before{

    content:'';

    width:0;

    height:0;

    font-size:0;

    line-height:0;

    overflow:hidden;

    position:absolute;

}

.box:after{

    border-top:20px solid #beceeb;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-20px;

    z-index:1;

}

.box:before{

    border-top:20px solid #ffffff;

    border-left:20px dashed transparent;

    border-right:20px dashed transparent;

    left:80px;

    bottom:-13px;

    z-index:2;

}

参考网址

https://www.cnblogs.com/wanghuih/p/5836635.html
http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
https://www.w3cplus.com/css/create-shapes-with-css

CSS边框作图的更多相关文章

  1. 理解CSS边框border

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

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

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

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

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

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. CSS 边框

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

  6. 第七十四节，css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  7. css边框小结

    css边框 CSS对界面的分割如上图,他们的含义如下: contend:包含HTML元素中包含的文本,图像或其他媒体.      padding:内容和边框之间的空格. 你可以想像这样的内在空间.   ...

  8. CSS边框效果

    前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...

  9. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

随机推荐

  1. Android 使用开源库载入网络图片

    Android 使用开源库载入网络图片,使用开源库载入图片.单击listview弹出popupwindow弹出框详情查看: Android 单击listview弹出popupwindow弹出框 ,里面 ...

  2. <memory>（包括了auto_ptr，shared_ptr等各种指针）

    Memory elements This header defines general utilities to manage dynamic memory: Allocators allocator ...

  3. 企业网管软件之SOLARWINDS实战-制作拓扑图

    企业网管软件之SOLARWINDS实战-制作拓扑图-开始 企业网管软件之SOLARWINDS实战-制作拓扑图 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  4. 用VXE保护Linux系统安全

      本文被转载在:http://www.linuxso.com/a/linuxxitongguanli/161.html 650) this.width=650;" onclick=&quo ...

  5. Non-resolvable parent POM for **: Could not find artifact **

    注意查看这句: 原因是本地仓库缺少了easybuy-parent:pom:0.0.1-SNAPSHOT, 原来是忘记了将父工程打包到本地仓库 ,运行聚合工程前记得先将依赖的工程都先Maven inst ...

  6. 【例7-15 UVA-1603】Square Destroyer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出所有的正方形(长度为1,2...n的)所包含哪些边. 然后记录每个正方形的应有边长和实际边长(有些边被删掉了); 然后搜的 ...

  7. HDU 3232 &amp;&amp; UVA 12230 (简单期望)

    Crossing Rivers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. Linux经常使用命令(七) - cp

    cp命令用来拷贝文件或者文件夹.是Linux系统中最经常使用的命令之中的一个.普通情况下.shell会设置一个别名.在命令行下拷贝文件时,假设目标文件已经存在.就会询问是否覆盖.无论你是否使用-i參数 ...

  9. iOS中 学会如何对sqlite3 进行封装

    #waring ---(看官注意) ---使用说明: ①在创建自定义model类之前让该类继承自文件中的Model类, ②为model类选一个NSString属性作为主键:(既,在初始化方法里面将从父 ...

  10. Nginx配置GZIP

    记录一次解决网站加载慢的问题 一. nginx配置 gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;g ...