css实现斜纹间隔背景及图片内边框悬浮效果代码-html代码-BFW代码库

css实现斜纹间隔背景及图片内边框悬浮效果代码

代码语言：html

所属分类：悬停

代码描述：css实现斜纹间隔背景及图片内边框悬浮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        img {
          --b: 5px;  /* the border thickness */
          --d: 20px; /* the distance from the edge */
          --o: 15px; /* the offset on hover */
          --s: 1;    /* the direction of the hover effect (+1 or -1)*/
          
          --_d: calc(var(--d) + var(--s)*1em);
          --_g: calc(100% - 2*var(--_d) - var(--b));
          --_m:
            conic-gradient(from 90deg at var(--_d) var(--_d),#0000 90deg,#000 0)
             0 0/calc(100% - var(--_d)) calc(100% - var(--_d)),
            conic-gradient(from 90deg at var(--b)  var(--b) ,#000 90deg,#0000 0)
             var(--_d) var(--_d)/var(--_g) var(--_g);
          -webkit-mask: var(--_m);
                  mask: var(--_m);
          font-size: 0;
          cursor: poi.........完整代码请登录后点击上方下载按钮下载查看