原文

　　简书原文：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. HUD——T 3836 Equivalent Sets

    http://acm.hdu.edu.cn/showproblem.php?pid=3836 Time Limit: 12000/4000 MS (Java/Others)    Memory Lim ...

  2. 洛谷——P1498 南蛮图腾

    https://www.luogu.org/problem/show?pid=1498 题目描述 自从到了南蛮之地,孔明不仅把孟获收拾的服服帖帖,而且还发现了不少少数民族的智慧,他发现少数民族的图腾往 ...

  3. css笔记（二）——几种经常使用的模式

    文本垂直居中 对于行内元素,height会自己主动收缩到包裹住文本的高度,所以不存在这个问题. 可是对于block和inline-block等盒子元素.假设设置了height属性,则文本默认会在上方显 ...

  4. java语言建立顺序表

    package datastructure; //线性表 public interface IList { public void clear(); public boolean isEmpty(); ...

  5. Exchanging Partitions and Subpartitions with Tables--官方文档

    原文地址:https://dev.mysql.com/doc/refman/5.6/en/partitioning-management-exchange.html In MySQL 5.6, it ...

  6. HASH Partitioning--转载

    原文地址:https://dev.mysql.com/doc/refman/5.1/en/partitioning-hash.html HASH Partitioning [+/-] 18.2.3.1 ...

  7. Android ViewPager嵌套ViewPager滑动冲突处理方法

    dispatchTouchEvent方法用于事件的分发,Android中所有的事件都必须经过这个方法的分发, 然后决定是自身消费当前事件还是继续往下分发给子控件处理.返回true表示不继续分发,事件没 ...

  8. IntelliJ IDEA 启动tomcat 报错: idea Unable to open debugger port (127.0.0.1:58233): java.net.SocketException "socket closed"

    debug启动项目弹出提示 Error running omp: Unable to open debugger port (127.0.0.1:50812): java.net.SocketExce ...

  9. CList 点击表头排序 （3）两种排序的第二种

    在头两篇中介绍了CListCtrl::SortItems() 方法的使用和其中的一个排序方法,这篇介绍另一种方法 CList 点击表头排序 (1)SortItems函数 CList 点击表头排序 (2 ...

  10. 2018/8/15 qbxt 测试

    2018/8/15 qbxt 测试 期望得分:100:实际得分:50   不知道为什么写挂了,明明是个水题 T^T 思路:模拟 注意:如果用 char 类型存储的话,如果有'z' + 9 会爆char ...