当前位置：Gxlcms > css > border三角形阴影和多重边框的整理转述

border三角形阴影和多重边框的整理转述

时间：2021-07-01 10:21:17 帮助过：68人阅读

1. border的组合写法

border：border-width border-style border-color;

border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以；

border-style：边框样式，一般用solid多一点，dashed（虚线）、dotted（点状线）也有；

border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；

边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ;

所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ;

单属性也可以有组合写法：

border-width:上 右 下 左；（顺时针方向）

border-width:上 左右 下；

border-width:上下 左右 ；

border-width:四个方向；

border-style | border-color也可以这样设置；

还可以根据方向来用组合写法：

border-left : 边框宽度 边框样式 边框颜色；

2. 用border做图形

边框的交界处是斜线，大师们用这个特性做出了三角形，配合其他属性，可以做出各种图形；

原理就是控制四个方向的边框颜色，就可以做出三角形；再控制宽度，就可以做出各种不同的钝角、锐角三角形；

border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述

border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             .triangle{
  7.                 border-style:solid;
  8.                 border-width: 30px 50px 60px 80px;
  9.                 /*我们可以控制各方向边框的宽度，做出各种不同的三角形*/
  10.                 border-color: #f00 #0f0 #00f #0ff;
  11.                 /*四个方向的颜色自由设置，当设置其他三个方向或两个方向的颜色为transparent(透明色)时，另一方向就成了一个三角形*/
  12.                 width: 0;/*盒子宽度为0，四个方向的border宽度一致，可以用border做正方形*/
  13.                 margin: 100px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <p class="triangle"></p>
  19.     </body></html>


我比较喜欢根据方向来写三角形，这样容易理解：

border三角形阴影和多重边框的整理转述


  1.             .triangle{
  2.                 border-left: 10px solid transparent;
  3.                 border-right: 10px solid transparent;
  4.                 border-bottom: 10px solid #0ff;
  5.                 /*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
  6.             }


3.小三角的阴影

三角形做出来了，但是当我们给元素定义一个box-shadow，会出现如下情况：

border三角形阴影和多重边框的整理转述

如果不想要阴影，很好解决，删掉三角形的box-shadow就好了；

而在实际应用中，我们很多情况下是需要阴影的，只是阴影出现在三角形的两条边上，下图给容器设置了阴影；

border三角形阴影和多重边框的整理转述

我们可以在加一个元素，也写成三角形，设置层级比箭头和容器元素都小，并且设置滤镜，位置比箭头稍高，露出边缘部分就可以了；

当我们把之前的箭头删掉，就是如图：border三角形阴影和多重边框的整理转述

完成品：border三角形阴影和多重边框的整理转述PS：滤镜也有兼容性问题，建议用谷歌浏览器测试；

以下是代码：

  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             .note{
  7.                 margin: 100px;
  8.                 width: 200px;
  9.                 height: 80px;
  10.                 background: #f60;
  11.                 position: relative;
  12.                 border-radius: 5px;
  13.                 box-shadow: 0 0 10px 0px #000;
  14.                 /*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/
  15.             }
  16.             .triangle{
  17.                 border-left: 10px solid transparent;
  18.                 border-right: 10px solid transparent;
  19.                 border-bottom: 10px solid #f60;
  20.                 /*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
  21.                 position: absolute;
  22.                 top: -10px;
  23.                 left: 50%;
  24.                 margin-left: -10px;
  25.             }
  26.             .filter{
  27.                 border-left: 10px solid transparent;
  28.                 border-right: 10px solid transparent;
  29.                 border-bottom: 10px solid #000;
  30.                 position: absolute;
  31.                 top: -10px;
  32.                 left: 50%;
  33.                 margin-left: -10px;
  34.                 z-index: -1;
  35.                 filter: blur(2px);
  36.                 /*这又设计到滤镜的知识*/
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <p class="wrapper">
  42.             <p class="note">
  43.                 <span class="triangle"></span>
  44.                 <span class="filter"></span>
  45.             </p>
  46.         </p>
  47.     </body></html>


4.小三角的边框

三角形阴影问题可以这样解决，同理，三角形的边框也可以这样：

写个三角形，沉在箭头下边，颜色设置成边框颜色，位置比箭头稍高一些（容器边框宽度值），就可以了；

接下来我使用：after 和 :before 写的三角形和边框，同理上面的阴影也可以这样；

border三角形阴影和多重边框的整理转述border三角形阴影和多重边框的整理转述


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             .note{
  7.                 margin: 100px;
  8.                 width: 200px;
  9.                 height: 80px;
  10.                 background: #f0f;
  11.                 position: relative;
  12.                 border-radius: 5px;
  13.                 border: 1px solid #000;
  14.             }
  15.             .note:after{
  16.                 content: "";
  17.                 border-left: 10px solid transparent;
  18.                 border-right: 10px solid transparent;
  19.                 border-bottom: 10px solid #f0f;
  20.                 /*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
  21.                 position: absolute;
  22.                 top: -10px;
  23.                 left: 50%;
  24.                 margin-left: -10px;
  25.             }
  26.             .note:before{
  27.                 content: "";
  28.                 border-left: 10px solid transparent;
  29.                 border-right: 10px solid transparent;
  30.                 border-bottom: 10px solid #000;
  31.                 position: absolute;
  32.                 top: -11px;
  33.                 /*写个三角形，沉在箭头下边，颜色设置成边框颜色，位置比箭头稍高一些（容器边框宽度值），就可以了*/
  34.                 left: 50%;
  35.                 margin-left: -10px;
  36.                 z-index: -1;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <p class="wrapper">
  42.             <p class="note"></p>
  43.         </p>
  44.     </body></html>

5. border-radius圆角

css3属性border-radius，“边框半径”，值可以用px、em、pt、百分比等；

border-radius支持四个角使用不同弧度，方向依次是左上--右上--右下--左下（是从左上开始，顺时针）；

border-radius还可以单独对每个角设置：

　border-top-left-radius

　border-top-right-radius

border-bottom-right-radius

　border-bottom-left-radius

单独设置可以写两个值，第一个值是水平半径，第二个值是垂直半径；如果只有一个值，那么水平和垂直相等；

border三角形阴影和多重边框的整理转述


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;
  8.                 margin: 0;
  9.             }
  10.             .test{
  11.                 width: 200px;
  12.                 height: 80px;
  13.                 margin: 100px;
  14.                 background: #f0f;
  15.                 border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%;
  16.                 /*水平-----/-----垂直，中间用“/”隔开*/
  17.                 /*左上水平   右上水平   右下水平   左下水平  /  左上垂直   右上垂直   右下垂直   左下垂直*/
  18.                 /*这种方法不推荐使用，太乱了，傻傻分不清楚*/
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <p class="test"></p>
  24.     </body></html>


当然，这个属性我们用的最多的就是画圆形，把值设成宽度的一半及以上（50%及以上），border-radius：50%，我就不举列子了;

6. 多重边框

outline制作多重边框

有的需求是边框外面还有边框，我们可以用outline来写，有一个相关的属性outline-offset，可以控制描边与边缘的位置关系，可以设置成负值；

outline制作多重边框，最多只能两层，而且不能是弧形的；

border三角形阴影和多重边框的整理转述


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;
  8.                 margin: 0;
  9.             }
  10.             .test{
  11.                 margin: 100px;
  12.                 width: 200px;
  13.                 height: 80px;
  14.                 border:10px solid #f0f;
  15.                 outline: 15px solid #f90;
  16.                 outline-offset: -25px;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <p class="test"></p>
  22.     </body></html>


box-shadow制作多重边框

box-shadow可以做很多层（多了会很卡，电脑性能问题），而且配合border-radius属性可以做出弧形；

box-shadow是不占据空间的，所以无法响应事件，我们可以利用inset设置成内阴影，在扩大空间就好了；

border三角形阴影和多重边框的整理转述


  1. <!DOCTYPE html><html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             *{
  7.                 padding: 0;
  8.                 margin: 0;
  9.             }
  10.             .test{
  11.                 margin: 100px;
  12.                 width: 200px;
  13.                 height: 80px;
  14.                 border:10px solid #f0f;
  15.                 border-radius: 25% 30% 50% 29%;
  16.                 box-shadow: 0 0 0 10px #0f0 , 0 0 0 20px #ff0 , 0 0 0 10px #0ff inset;
  17.                 /*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/
  18.                 /*可以写多个阴影，用逗号隔开*/
  19.                 /*inset是内阴影*/
  20.                 /*由于box-shadow属性并不占据空间，所以是无法响应事件的，我们可以利用inset内阴影，再用padding扩充空间就好了*/
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <p class="test"></p>
  26.     </body></html>

更多border三角形阴影和多重边框的整理转述相关文章请关注PHP中文网！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！