酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

CSS实现切角+边框+投影+内容背景色渐变效果

来源:互联网 作者:秩名 人气: 发布时间:2021-10-27
本篇文章主要介绍了CSS实现切角+边框+投影+内容背景色渐变效果,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

单纯用css实现切角+边框+投影+内容背景色渐变所有效果,因为UI没给背景切图,寻思这个理论上用css就能实现。

看一下最终要实现的效果:

首先不谈内容紫蓝色渐变,一个单纯的四切角+黑色边框+轮廓投影,其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框 + filter: box-shadow实现投影就行了,效果和代码如下:

<html>
  <body>
    <div class="box"></div>
  </body>
  <style>
    body {
      background-color: #55486b;
    }
    .box {
      margin: 20px;
      width: 200px;
      height: 200px;
      z-index: 0;
      background: linear-gradient(
            135deg,
            transparent calc(10px + 1 * 0.414px),
            #18121a 0
          )
          top left,
        linear-gradient(
            -135deg,
            transparent calc(10px + 1 * 0.414px),
            #18121a 0
          )
          top right,
        linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
          bottom right,
        linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
          bottom left;
      background-size: 55% 50%;
      background-repeat: no-repeat;
      position: relative;
      filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
    }
    .box::after {
      z-index: 1;
      width: calc(100% - 2 * 1px);
      height: calc(100% - 2 * 1px);
      content: "";
      display: block;
      background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
        linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
        linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
        linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
      background-size: 55% 51%;
      background-repeat: no-repeat;
      position: absolute;
      left: 1px;
      top: 1px;
    }
  </style>
</html>

相当于四个角斜方向用一小段透明色+一大段背景色拼凑起来实现的切角,background-size要大于50%以免有白色线bug。大的div里再套一层小的伪元素实现边框。但由于是四块背景色拼起来的,所以要实现整个内容渐变看起来不可能了。

要实现内容区域也是渐变的,那么换种思路,之间里面那层伪元素background是渐变的,四个切角通过其他属性来切掉,这样就有其他的实现方法了,先来看看:

方法一:mask遮罩

 其他东西不变,之前伪元素那块是和外层一样的思路实现切角,这种思路下是无法做到垂直渐变的(因为切角已经是通过斜对角透明色渐变做的),那么直接把背景色写成渐变,通过mask遮罩属性来将四个切角变透明:

 .box::after {
      z-index: 1;
      width: calc(100% - 2 * 1px);
      height: calc(100% - 2 * 1px);
      content: "";
      display: block;
      background: linear-gradient(180deg, #3c2f4f, #2e2269);
      -webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
          left,
        linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
        linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
        linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
      -webkit-mask-size: 55% 51%;
      -webkit-mask-repeat: no-repeat;
      position: absolute;
      left: 1px;
      top: 1px;
    }

 稍许更改一下上面的代码里伪元素的样式,就实现了。

方法二:clip-path

clip-path属性可以直接修剪掉元素周围的边界,如果直接运用在上面伪元素,会发现投影也被遮盖了,那么换个思路,我们索性不要伪元素那一层,直接把div修剪出4个切角。因为filter属性可以叠加,将其父元素添加filter,前n+1个drop-shadow叠加起来形成一个类似黑色边框,最后一个drop-shadow来实现浅白色投影。效果如下:

<html>
  <body>
    <div class="outer">
      <div class="box"></div>
    </div>
  </body>
  <style>
    body {
      background-color: #55486b;
    }
    .outer {
      filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
        drop-shadow(0px 0px 1px #18121a)
        drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
    }
    .box {
      margin: 20px;
      width: 200px;
      height: 200px;
      border-radius: 12px;
      position: relative;
 
      background: linear-gradient(180deg, #3c2f4f, #2e2269);
      -webkit-clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0 calc(100% - 20px),
        0 20px
      );
      clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0 calc(100% - 20px),
        0 20px
      );
      position: relative;
    }
  </style>
</html>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/css/795296.html

相关文章

  • css实现背景颜色半透明的两种方法介绍

    css实现背景颜色半透明的两种方法介绍

    在页面布局时,为了给用户不一样的视觉效果,需要设置div的背景颜色为半透明状态,你知道怎么设置吗? 接下来,就和大家聊聊如何用两种方式使div的背景颜色变成半......
    12-05
  • CSS实现切角+边框+投影+内容背景色渐变效果

    CSS实现切角+边框+投影+内容背景色渐变效果

    单纯用css实现切角+边框+投影+内容背景色渐变所有效果,因为UI没给背景切图,寻思这个理论上用css就能实现。 看一下最终要实现的效果: 首先不谈内容紫蓝色渐变,一......
    10-27
  • CSS实现头像与国旗融合的代码

    CSS实现头像与国旗融合的代码

    到国庆了,大家都急着给祖国母亲庆生。 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错。 那么,将一张国旗图片与我们的头......
    10-24
  • css边框添加四个角的实现代码介绍

    css边框添加四个角的实现代码介绍

    1、html div class=loginbody div class=border_corner border_corner_left_top/div div class=border_corner border_corner_right_top/div div class=border_corner border_corner_left_bottom/div div class=border_corner border_corn......
    10-17
  • 使用CSS3实现按钮悬停闪烁动态特效代码

    使用CSS3实现按钮悬停闪烁动态特效代码

    我们先来看看效果图 下面我们来研究一下是怎么实现这个效果的: 首先是HTML部分,定义一个div容器包裹button按钮,在按钮中使用标签对来包含按钮文本 div id=shiny-shadow......
    10-06
  • 能用CSS实现的就不要麻烦JavaScript了

    能用CSS实现的就不要麻烦JavaScript了

    凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写。Atwood定律 虽然万物都可以是JavaScript,但某种程度css的运行效率会比JavaScript高,所以笔者认为:能用CSS实现的......
    10-06
  • CSS在DevTools中架构演变的介绍

    CSS在DevTools中架构演变的介绍

    DevTools 中 CSS 的先前状态 DevTools 以两种不同的方式实现 CSS: 一种用于DevTools遗留部分中使用的 CSS 文件 另一种用于 DevTools 中使用的现代 Web 组件。 对于第一种遗留部分的......
    09-30
  • CSS布局之浮动(float)和定位(position)属性的区别

    CSS布局之浮动(float)和定位(position)属性的区别

    CSS 布局 - position 属性 position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。 position 属性 position 属性规定应用于元素的定位方法的类型。......
    09-27
  • CSS动画如何中途停止并维持姿态的介绍

    CSS动画如何中途停止并维持姿态的介绍

    我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动......
    09-27
  • 使用CSS实现一个搜索引擎的原理介绍

    使用CSS实现一个搜索引擎的原理介绍

    在CSS中,我们通过selector(选择器)选择样式片段: .title { color: red;} 简而言之,选择器title对应样式color: red; 换个角度,我们也可以说:关键词.title对应数据color: red; 在我......
    09-21