原文

　　简书原文：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. 【例题 8-13 UVA - 11093】Just Finish it up

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 假设现在取[l..r]这一段. 然后发现累加的和小于0了. 那么方法只能是不走l..l+1这一段了 即delta递减(p[ ...

  2. ZOJ 3524 Crazy Shopping

    Crazy Shopping Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...

  3. Kali Linux下安装VMware Tools

    引言 Kali Linux是基于Debian的Linux发行版, 设计用于数字取证和渗透測试.安装Kali Linux非常easy,可是安装VMware Tools的过程就有点麻烦了,由于在安装中途会 ...

  4. TextView-显示自己添加的字体样式

    1.首先要把我们的字体放到相应的目录下 如果我们仅仅是想要验证一个字体,我们可以直接 我们的字体push到 手机 /system/fonts/ 目录下面 2.在代码中进行设置 import andro ...

  5. BZOJ3530: [Sdoi2014]数数(Trie图,数位Dp)

    Description 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子串.例如当S=(22,333,0233)时,233是幸运数,2333.20233.3 ...

  6. 微信小程序简单常见首页demo

    wxml <view class='index-contier'> <view class="index-left"> <view>电池剩余&l ...

  7. 在Linux下用CANopenSocket协议模拟CAN总线通讯

    一.参考文档 https://github.com/CANopenNode/CANopenSocket //下载 CANopenSocket 的源码 http://elinux.org/Can-uti ...

  8. CISP/CISA 每日一题 八

    CISA 每日一题(答)网关执行电子邮件格式转换 电子邮件安全——加密 大文件——对称加密 不可否认——非对称 哈希——完整性     电子银行主要风险: 战略.经营和声誉上的风险 双SSP每日一题 ...

  9. Spring学习总结（6）——Spring之核心容器bean

    一.Bean的基础知识 1.在xml配置文件中,bean的标识(id 和 name) id:指定在benafactory中管理该bean的唯一的标识.name可用来唯一标识bean 或给bean起别名 ...

  10. JS实现联想自动补齐功能

    <!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title&g ...