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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php 操作调试的方法
2012/07/12 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
jQuery使用方法
2017/02/04 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python的help函数如何使用
2020/06/11 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
在线课程:Skillshare
2019/04/02 全球购物
什么是Rollback Segment
2013/04/22 面试题
四川成都导游欢迎词
2014/01/18 职场文书
优秀求职信范文分享
2014/01/26 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
夜不归宿检讨书
2014/02/25 职场文书
北京申奥口号
2014/06/19 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang