运用CSS中linear制做繁杂的边框实际效果

2020-10-18 07:35 jianzhan

在网上看到1种运用linear-gradient特性制做绚丽多彩边框实际效果的方式。最先得出编码,大伙儿能够在自身的电脑上中查询实际效果:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>     
  2.      
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">     
  4. <head>     
  5.     <meta charset="utf⑻" />     
  6.     <title></title>     
  7.     <style>     
  8.         .box {     
  9.             margin: 80px 30px;     
  10.             width: 200px;     
  11.             height: 200px;     
  12.             position: relative;     
  13.             background: #fff;     
  14.             float: left;     
  15.         }     
  16.      
  17.             .box:before {     
  18.                 content: '';     
  19.                 z-index: ⑴;     
  20.                 position: absolute;     
  21.                 width: 220px;     
  22.                 height: 220px;     
  23.                 top: ⑴0px;     
  24.                 left: ⑴0px;     
  25.             }     
  26.      
  27.         .first:before {     
  28.             background-image: linear-gradient(90deg, yellow, gold);     
  29.         }     
  30.      
  31.         .second:before {     
  32.             background-image: linear-gradient(0deg, orange, red);     
  33.         }     
  34.      
  35.         .third:before {     
  36.             background-image: repeating-linear-gradient(⑷5deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
  37.         }     
  38.     </style>     
  39. </head>     
  40. <body>     
  41.     <div class="box first"></div>     
  42.     <div class="box second"></div>     
  43.     <div class="box third"></div>     
  44. </body>     
  45. </html>  

  
有编码能够看出,实际上大家并沒有应用border,那末这类边框实际效果是如何完成的呢?
整体思路是,大家先界定1个白色的div,在界定1个白色方块大1圈的带色调的div。两个重合1下,而且让白色的div遮盖五颜六色div,就完成了边框的实际效果。
这里边用到的css专业知识点许多。

1、:before伪类

根据上面的编码大家看出,实际上大家在界定的白色div中界定了1个:before伪类,把五颜六色方块全部的款式都放在了这里。这是由于应用:before界定可使得精准定位更为便捷,要是调剂top和left为边框的宽度便可以了。另外也是的2者变成1个总体。

2、linear-gradient

如今许多访问器都适用这个css方式。该方式有下列3种应用方式:
①background:linear-gradient(top,#fff,#000)
这段编码的意思是,从上部刚开始为白色,究竟部为黑色开展过多。
②background:linear-gradient(top,right,#fff,#000)
这段编码有关部位传送了两个主要参数,top和right,表明从右上放宽始,到左正下方转变,别的道理与第1个同样。
③background:linear-gradient(30deg,#fff,#000)

这段编码的第1个主要参数传送的是角度,实际上道理和部位是1样的,只是否从规范的部位刚开始转变了。那末角度和部位的对应关联是甚么呢?依据试验,0度对应bottom,90度对应left,180度对应top,360度对应right。

以上便是运用linear方式完成绚丽多彩边框的编码调解释,大伙儿能够在当地开展完成,以此发现更多奇特的组成完成方式。