CSS中border的高能效应，教你制作各种简易图形

言

在前端开发中经常会用到很多的简易图形，例如三角形，箭头，圆形等。有很多人一开始会想着用小的图片实现，不过这样会增加页面请求次数，延缓页面加载效果。

在CSS中有个border属性，它完全可以达到制作各种简易图形的效果，今天我们就一起来看看吧。

文章中的代码都已经放在了github上，感兴趣的同学自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border讲解

在制作各种简易图形之前，我们先来看看border属性的使用。

border是一个复合属性。

border-width表示边框宽度。
border-style表示边框样式，设置实线，虚线，点状等。
border-color表示边框颜色，还可以设置transparent，表示透明。

border又分为上下左右四个方向，每个方向都占据各自的空间，不会出现重叠的地方，尤其是在四个方向的边框都设置的情况下，在四个角处也不会出现重叠。

我们来看个最简单的例子，在四个方向上都设置边框，赋予不同的颜色。

图片1

通过上面的图片1可以看出，四个角处是分离，没有重合的。

梯形

首先我们来看看梯形的效果图。

梯形效果图

我们再来分析下梯形是如何实现的。

因为我们完全是通过border设置，所以这个div的高度应该为0。
梯形的左右两个腰，恰好如同border在角的衔接处，然后将两侧的border-style设置为transparent。

因此我们可以得到以下的CSS代码。

梯形的CSS代码

修改border-left和border-right的宽度值，可以改变梯形的形状。

三角形

三角形也分为上下左右四个方向，我们首先来看看总体的形状。

三角形

然后我们也来分析下如何实现这个效果，以下三角形为例。

因为是呈现三角形的形状，刚好契合border在角落的衔接处，因此高度和宽度都应该为0。
下三角形是上部有区域，所以要设置border-top。
border-left和border-right两个方向都要设置宽度，然后设置为透明即可。

因此得到以下的CSS代码，设置不同方向border的宽度，三角形的形状也会跟着变。

下三角形CSS代码

同理，只要掌握了其中一个方向的三角形原理，就会轻松写出其他方向三角形的CSS代码。

这里直接给出上三角形的CSS代码。

上三角形CSS代码

左三角形的CSS代码如下所示。

左三角形CSS代码

右三角形的CSS代码如下所示。

右三角形CSS代码

正方形-四种颜色

接下来我们看一种基本的只用border设计的形状。

图形

它的实现方式也很简单，只需要将width和height设置为0，然后将border四个方向的宽度设置成一样的即可。

得到的代码如下所示。

CSS代码

直角三角形

基于上述的实现，我们可以得到左下，左上，右上，右下四种三角形。

首先看看基本形状。

直角三角形

看到图形后，我们很容易发现，只要隐藏掉连接的两个方向的border，显示出另外两个方向的border，就可以得到直角三角形。

这里我们只展示出左上三角形的CSS代码。

左上直角三角形CSS代码

其他方向的直角三角形代码可类比得出，大家可以试一下。

六角星

首先我们看看六角星的形状。

六角星

看到这个图形，大家应该能想到可以由上下两个三角形构成，只要将上下两个三角形位置对应准确。

这里为了节省页面元素的空间，我们可以采用伪元素去实现。

将页面显示元素设置为上三角形。
利用:after伪元素设置下三角形。
设置伪元素的position为absolute，调节right和top值。

通过上述分析，我们得到以下CSS代码。

六角星CSS代码

圆形

与border属性搭配使用的还有一个很常用的属性，那就是border-radius。

border-radius是专门设置圆角的，可以让90度角变为圆角。

我们首先看看最基本的圆形的样子。

圆形

其实我们只需要将border-radius属性设置为宽或者高的一半以上即可。代码如下所示。

圆形

同心圆

我们来看看同心圆的样子。

同心圆

同心圆只需要设置一个border边框，给border设置一个特殊的背景色，给div设置成白色背景即可。

同心圆CSS代码

半圆

我们来看看半圆的形状。

半圆

半圆的效果是如何实现的呢？

首先元素自身高度设置为0，设定宽度值。
设定上部和右部的border。
设定左上角和右上角的border-radius值。

得到的代码如下所示。

上半圆

同理，下半圆，左半圆和右半圆修改对应的值就可以获得。

结束语

今天这篇文章主要通过border属性，画出了一系列简易的图形，这在实际中是很实用的，大家学会了吗?

lt;div class="sector"></div>

.sector{
      width: 200px;
      height: 200px;
      border-radius: 200px;
      background-color: deepskyblue;
      position: relative;
    }
    .sector::before{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁减半圆，再做旋转*/
      clip: rect(0px,100px,200px,0);
      transform: rotate(-60deg);
    }
    .sector::after{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁减半圆，再做旋转*/
      clip: rect(0px,200px,200px,100px);
      transform: rotate(60deg);
    }

方式二

<>
  <style>
    #demo {
      position: relative;
      width: 50px;
      height: 50px;
      overflow: hidden;
    }
    #circle {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: black;
      border-radius: 50%;
    }
  </style>
  <body>
    <div id="demo">
      <div id="circle"></div>
    </div>
  </body>
</>

方式三

有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.1 盒子模型

在学习盒子模型之前，先来看一个生活中的例子。假如墙上排列着几幅画。对于每幅画来说，都有一个边框，在英文中称为border；每个画框中，画和边框通常都会有一定的距离，这个距离称为内边距，在英文中称为padding；每一幅画间也不是紧挨着的，也存在一些距离称为外边距，在英文中称为margin。

在CSS中，一个独立的盒子模型由content（页面内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成

1.content：位于最中间，页面的主要显示内容，也就是这幅画的本身2.border：位于内边距外面，如果没有内边距就是包着内容的外框。它一般具有一定的厚度，也就是这幅画的画框3.padding：位于边框内部的空隙，是内容与边框的距离，也就是画框和图之画之间的空隙4.margin：位于边框内部空隙，边框外面周围的距离，也就是每幅画之间的空隙

1.1.1 边框

边框（border）有三个属性，分别是color（颜色）、width（粗细）和style（样式）。在网页中设置边框样式时，尝尝需要将这三个属性很好地配合起来，才能达到良好的页面效果。在使用CSS设置边框时，分别使用border-color、border-width和border-style设置边框的颜色、粗细和样式

border-color

border-color的设置方法与文本的color属性或背景颜色bancground-color属性的设置方法完全一样，也是使用十六进制设置边框的颜色，如红色为#FF0000，也可以使用RGBA的颜色表示方法。

由于盒子模型分为上、下、左、右四个边框，因此在设置边框颜色时，可以按上、右、下、左的顺序来设置四个边框颜色，也可以同时设置四个边框的颜色。border-color属性设置方法如下：

属性说明举例border-top-color设置上边框颜色border-top-color:#369border-right-color设置右边框颜色border-right-color:#369border-bottom-color设置下边框颜色border-bottom-color:#FAE45Bborder-left-color设置左边框颜色border-left-color:#EEFF34border-color设置四个边框颜色为同一个颜色border-color:#EEFF34

当使用border-color属性同时设置四条边框颜色时，设置顺序按顺时针方向上、右、下、左设置边框颜色，属性值之间以空格隔开。没有设置属性值的找对边

例如：border-color:#369 #000 #F00 #00F;四个属性按上、右、下、左依次对号入座。

例如：border-color:#369 #000 #F00;三个属性值按上、右、下、左依次对号入座。#369对应上边框，#000对应右边框，#F00对应下边框，发现到“左”的时候没有属性值了，这时候找它的对边。因为“左”的对边是“右”所以#000对应左边框

以后无论给出几个属性值都按照“上、右、下、左”“没有找对边”的方式来对应

border-width

border-width用来指定border的粗细程度，它的值有thin、medium、thick和像素值

thin ：设置细的边框

medium：默认值，设置中等的边框一般的浏览器都将其解析为2px

thick：设置粗的边框

像素值：表示具体的数值，自定义设置边框的宽度，如1px、5px等

border-style

border-style用来指定border的样式，它的值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset，其中none、dotted、dashed、solid在实际网页制作中是经常用到的值。none表示无边框，dotted表示点线边框，dashed表示虚线边框，solid表示实现边框。由于dotted和dashed在大多数浏览器显示为实线，因此在实际网页中，为了浏览器兼容性，常用none和solid。

值含义none默认无边框dotted定义一个点线边框dashed定义一个虚线边框solid定义实线边框double定义两个边框。两个边框的宽度和 border-width 的值相同groove定义3D沟槽边框。效果取决于边框的颜色值ridge定义3D脊边框。效果取决于边框的颜色值inset定义一个3D的嵌入边框。效果取决于边框的颜色值outset定义一个3D突出边框。效果取决于边框的颜色值

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*设置div边框，1px黑色的实线边框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*设置第一个p标签边框为1px的点状虚线*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*设置第二个p标签边框为1px的虚线边框*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*设置第三个p标签边框为4px的双线边框*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.2 外边距

外边距（margin）位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离，例如示例1效果图中标题与div上边框之间的距离，以及标题与下方表单之间的距离都是由h2外边距产生的。从图中也可以看到页面内容并没有紧贴浏览器，而是与浏览器有一定的距离，这就是因为body本身也是一个盒子，也有一个外边距，这也是由body的外边距产生的。

外边距与边框一样，也分为上外边距、右外边距、下外边距、左外边距，使用方法和border-color方法一样。

1.1.3 内边距

内边距（padding）用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。内边距与外边距一样，也分为上内边距、右内边距、下内边距、左内边距，设置方式和设置顺序也都一样，请参照border-color设置方法。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*设置div边框，1px黑色的实线边框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*设置第一个p标签边框为1px的点状虚线*/margin-top: 30px; /*距离顶部的距离30px*/padding: 40px;   /*所有填充都是40px*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*设置第二个p标签边框为1px的虚线边框*/margin-left: 20px;  /*距离左侧的距离20px*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*设置第三个p标签边框为1px的双线边框*/margin: 50px;  /*4个边距50px*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.4 盒子模型的尺寸

在CSS中，width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width:100px;/*div宽度100px*/height:100px;/*div高度100px*/padding:5px;/*div上右下左外边距5px*/margin:10px;/*div上右下左内边距10px*/border:1px solid #000;/*div上右下左边框为1px*/    }</style></head><body><div></div></body></html>

运行之后会发现div的实际总宽度为112px而不是100px这说明把宽度width设置为100px是不能达到最终要求的盒子总宽度为100px的。

修改上面代码如下：

div{        width:88px;/*div宽度100px*/height:88px;/*div高度100px*/padding:5px;/*div上右下左外边距5px*/margin:10px;/*div上右下左内边距10px*/border:1px solid #000;/*div上右下左边框为1px*/    }

盒子模型的计算方法：

盒子模型内盒总尺寸=border（上下/左右）+padding（上下/左右）+内容宽度

1.1.5 box-sizing拯救布局

为了解决上述问题CSS3添加了一个盒子模型属性box-sizing，能够事先定义盒子模型的尺寸解析方式

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

box-sizing: content-box|border-box|inherit:

值说明content-box这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外border-box指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit指定 box-sizing 属性的值，应该从父元素继承

示例

div {        width:100px;        height:100px;        padding:5px;        margin:10px;        border:1px solid #000;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;    }

2.1 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：

2.1.1 圆角边框语法

border-radius:length{1,4}

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1.border-radius:length{1}设置一个属性值表示top-left,top-right,bottom-right和bottom-left四个值是一样的，也就是元素四个圆角效果一样

2.border-radius:length{2}设置两个属性值表示top-left等于bottom-right，并且取第一个值，top-right等于bottom-left，并且取第二个值，也就是左上角和右下角取第一个值，右上角和左下角取第二个值

3.border-radius:length{3}设置三个属性值，第一个值是top-left,第二个值是top-right和bottom-left，第三个只是bottom-right

4.border-radius:length{4}设置四个属性值，第一个值是top-left，第二个值是top-right第三个值bottom-right第四个值bottom-left

示例

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:10px solid red;       -webkit-border-radius:20px;       -moz-border-radius:20px;       border-radius:20px;/*div四个角都是圆角，值为20px*/   }</style></head><body><div></div></body></html>

2.1.2 使用border-radius制作特殊图形

制作圆形

利用border-radius属性制作圆角时有两个要点

1.元素的宽度和高度必须相同 2.圆角的半径为元素宽度的一般，或者直接设置圆角半径值为50%

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:4px solid red;       -webkit-border-radius:50%;       -moz-border-radius:50%;       border-radius:50%;/*div四个角都是圆角，值为20px*/   }</style></head><body><div></div></body></html>

制作半圆

利用border-radius属性制作半圆的方法和制作圆形的方法一样，只是元素的宽度与圆角的方为要配合一直，不同的宽度和高度比例，以及圆角的方位，可以制作上半圆、下半圆、左半圆、右半圆

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:100px;        height:50px;        -webkit-border-radius:50px50px00;        -moz-border-radius:50px50px00;        border-radius:50px50px00;    }   div:nth-of-type(2){        width:100px;        height:50px;        -webkit-border-radius: 0050px50px;        -moz-border-radius: 0050px50px;        border-radius: 0050px50px;    }   div:nth-of-type(3){        width:50px;        height:100px;        -webkit-border-radius:050px50px0;        -moz-border-radius:050px50px0;        border-radius:050px50px0;    }   div:nth-of-type(4){        width:50px;        height:100px;        -webkit-border-radius:50px0050px;        -moz-border-radius:50px0050px;        border-radius:50px0050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

制作半圆形的要点：

1.当制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值2.当制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

制作扇形

遵循“三通，一不同”原则，“三同”是元素宽度、高度、圆角半径相同，“一不同”是圆角取值位置不同

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:50px;        height:50px;        -webkit-border-radius:50px000;        -moz-border-radius:50px000;        border-radius:50px000;    }   div:nth-of-type(2){        width:50px;        height:50px;        -webkit-border-radius: 050px00;        -moz-border-radius: 050px00;        border-radius: 050px00;    }   div:nth-of-type(3){        width:50px;        height:50px;        -webkit-border-radius:0050px0;        -moz-border-radius:0050px0;        border-radius:0050px0;    }   div:nth-of-type(4){        width:50px;        height:50px;        -webkit-border-radius: 00050px;        -moz-border-radius: 00050px;        border-radius: 00050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

3.1 盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

1.inset：阴影类型，可选值，如果不设置，默认的投影方式是外阴影；如果设置了inset表示内阴影

2.x-offset：X轴位移，用来指定阴影水平位移量，其值可以是正值，也可以是负值，如果问正值，阴影在对象的右边；反之，阴影在对象的左边

3.y-offset：Y轴位移，用来指定因应垂直位移量，其值可以是正值，也可以是负值，如果为正值，阴影在对象的底部；反之，阴影在对象的右边

4.blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围，值越大阴影向外模糊的范围就越大，阴影的边缘就越模糊。这个值只能是正值，如果为0，则表示不具有模糊效果，是可选值

5.color：阴影颜色，定义绘制阴影时所使用的颜色。阴影颜色可以是十六进制颜色，RGB、RGBA透明色等，不写这个值会用浏览器的默认色代替，由于浏览器默认色不一样，因此建议不要省略这个值

与用图片来制作盒子阴影相比，利用box-shadow属性修改阴影效果要方便的多，并且从box-shadow的语法上可以看出它的每个属性值都是可以自由设置的，这就意味着我们可以随意设置出不同的阴影效果

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{        width:100px;        height: 100px;        border:1px solid red;        -webkit-border-radius:8px;        -moz-border-radius:8px;        border-radius:8px;        margin:20px;        -webkit-box-shadow:  20px10px#06C;        -moz-box-shadow:  20px10px#06C ;        box-shadow:  20px10px#06C ;    }</style></head><body><div></div></body></html>

4.1 总结

1.盒子模型的概念、盒子模型的边框、外边距和内边距在网页中的使用方法2.使用border、padding、margin美化图片、div、列表、表单元素等网页元素3.精确计算盒子模型的尺寸，并且可以通过box-sizing选择盒子模型的解析方式4.使用border-radius给元素添加圆角效果，以及制作特殊的图形5.使用box-shadow给元素添加内、外阴影效果

免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/

在线咨询

上一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作
下一篇：WEB编程里面的HTML英文文档，你能够正确翻译吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS中border的高能效应，教你制作各种简易图形

言

border讲解

梯形

三角形

正方形-四种颜色

直角三角形

六角星

圆形

同心圆

半圆

结束语

1.1 盒子模型

1.1.1 边框

border-color

border-width

border-style

1.1.2 外边距

1.1.3 内边距

1.1.4 盒子模型的尺寸

1.1.5 box-sizing拯救布局

2.1 圆角边框

2.1.1 圆角边框语法

2.1.2 使用border-radius制作特殊图形

3.1 盒子阴影

4.1 总结

您的项目需求