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


Posted in HTML / CSS onNovember 01, 2021

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

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

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

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

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

<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遮罩属性来将四个切角变透明:

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

.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来实现浅白色投影。效果如下:

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

<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>

不知道还有没有更简单且兼容性更好的方法~~~~

到此这篇关于CSS实现切角+边框+投影+内容背景色渐变效果的文章就介绍到这了,更多相关css背景色渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
js常用函数 不错
2006/09/08 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
简单了解Django项目应用创建过程
2020/07/06 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
员工考核管理制度
2014/02/02 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
停水通知
2015/04/16 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书