您现在的位置是：网站首页> 编程资料编程资料

利用CSS中linear制作复杂的边框效果CSS3实现超酷的黑猫警长首页CSS3实现千变万化的文字阴影text-shadow效果设计什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条CSS3 RGBA色彩模式使用实例讲解CSS3不透明度实例讲解CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义深究CSS定位position的常用技法探究CSS边框特效实现技巧CSS实现弹簧效果的旋转加载动画CSS实现大小相同、颜色深浅不一的粒子旋转加载动画

2021-09-05 1010人已围观

简介 这篇文章主要介绍了利用CSS中linear制作复杂的边框效果的相关资料，利用linear-gradient属性制作绚丽的边框效果

网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：

XML/HTML Code复制内容到剪贴板
  1. >     
  2.      
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">     
  4. <head>     
  5.     <meta charset="utf-8" />     
  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: -1;     
  20.                 position: absolute;     
  21.                 width: 220px;     
  22.                 height: 220px;     
  23.                 top: -10px;     
  24.                 left: -10px;     
  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(-45deg,#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，那么这种边框效果是怎么实现的呢？
总体思路是，我们先定义一个白色的div，在定义一个白色方块大一圈的带颜色的div。两个重叠一下，并且让白色的div覆盖彩色div，就实现了边框的效果。
这里面用到的css知识点很多。

1、:before伪类

通过上面的代码我们看出，其实我们在定义的白色div中定义了一个:before伪类，把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便，只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。

2、linear-gradient

现在很多浏览器都支持这个css方法。该方法有以下三种使用模式：
①background:linear-gradient(top,#fff,#000)
这段代码的意思是，从上部开始为白色，到底部为黑色进行过度。
②background:linear-gradient(top,right,#fff,#000)
这段代码关于位置传递了两个参数，top和right，表示从右上放开始，到左下方变化，其他道理与第一个相同。
③background:linear-gradient(30deg,#fff,#000)

这段代码的第一个参数传递的是角度，其实道理和位置是一样的，只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢？根据实验，0度对应bottom，90度对应left，180度对应top，360度对应right。

以上就是利用linear方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。

上一篇：探究CSS边框特效实现技巧CSS3实现超酷的黑猫警长首页CSS3实现千变万化的文字阴影text-shadow效果设计什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条CSS3 RGBA色彩模式使用实例讲解CSS3不透明度实例讲解CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义利用CSS中linear制作复杂的边框效果深究CSS定位position的常用技法CSS实现弹簧效果的旋转加载动画CSS实现大小相同、颜色深浅不一的粒子旋转加载动画

下一篇：CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义CSS3常用的几种颜色渐变模式总结利用CSS3把图片变成灰色模式的实例代码什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条CSS3 RGBA色彩模式使用实例讲解使用CSS实现黑暗模式和高亮模式的切换功能

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网