border相关用法（二）

作者: 給我小鱼干 | 来源:发表于2019-02-27 14:56 被阅读0次

border相关用法（二）
border相关用法(一)
盒子大小、轮廓和阴影、浮动
border相关
2018-06-05
vue使用g2图表
border的用法
border高级用法（）
CSS3之box-sizing
css可继承属性

1.图片背景边框

 <style>
    .box{
      position: absolute;
      margin: auto;
      top:0;
      left:0;
      right:0;
      bottom:0;
      border-radius: 5px;
      width: 200px;
      height: 100px;
      padding: 1em;
      border: 1em solid transparent;
      background: linear-gradient(white,white), url(./1.jpg);
      background-size: cover;
      background-clip: padding-box,border-box;
      background-origin: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

背景边框.png

2.老式信封边框

<style>
    .box{
      position: absolute;
      margin: auto;
      top:0;
      left:0;
      right:0;
      bottom:0;
      border-radius: 5px;
      width: 200px;
      height: 100px;
      padding: 1em;
      border: 16px solid transparent;
      border-image: 16 repeating-linear-gradient(-45deg,
      red 0, red 1em,
      transparent 0, transparent 2em,
      #58a 0, #58a 3em,
      transparent 0, transparent 4em);
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>

信封边框.png

3.蚂蚁行军边框

 <style>
    .box{
      position: absolute;
      margin: auto;
      top:0;
      left:0;
      right:0;
      bottom:0;
      border-radius: 5px;
      width: 200px;
      height: 100px;
    }
    @keyframes ants { to { background-position: 100% } }
    .marching-ants {
      padding: 1em;
      border: 1px solid transparent;
      background:
        linear-gradient(white, white) padding-box,
        repeating-linear-gradient(-45deg,
        black 0, black 25%, white 0, white 50%
        ) 0 / .6em .6em;
      animation: ants 12s linear infinite;
    }
  </style>
</head>
<body>
  <div class="box marching-ants">
  </div>
</body>

蚂蚁行军边框.png