经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
CSS实现切角+边框+投影+内容背景色渐变效果_CSS教程_CSS
来源:jb51  时间:2021/11/8 12:38:15  对本文有异议

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

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

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

  1. <html>
  2. <body>
  3. <div class="box"></div>
  4. </body>
  5. <style>
  6. body {
  7. background-color: #55486b;
  8. }
  9. .box {
  10. margin: 20px;
  11. width: 200px;
  12. height: 200px;
  13. z-index: 0;
  14. background: linear-gradient(
  15. 135deg,
  16. transparent calc(10px + 1 * 0.414px),
  17. #18121a 0
  18. )
  19. top left,
  20. linear-gradient(
  21. -135deg,
  22. transparent calc(10px + 1 * 0.414px),
  23. #18121a 0
  24. )
  25. top right,
  26. linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
  27. bottom right,
  28. linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
  29. bottom left;
  30. background-size: 55% 50%;
  31. background-repeat: no-repeat;
  32. position: relative;
  33. filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
  34. }
  35. .box::after {
  36. z-index: 1;
  37. width: calc(100% - 2 * 1px);
  38. height: calc(100% - 2 * 1px);
  39. content: "";
  40. display: block;
  41. background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
  42. linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
  43. linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
  44. linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
  45. background-size: 55% 51%;
  46. background-repeat: no-repeat;
  47. position: absolute;
  48. left: 1px;
  49. top: 1px;
  50. }
  51. </style>
  52. </html>

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

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

方法一:mask遮罩

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

  1. .box::after {
  2. z-index: 1;
  3. width: calc(100% - 2 * 1px);
  4. height: calc(100% - 2 * 1px);
  5. content: "";
  6. display: block;
  7. background: linear-gradient(180deg, #3c2f4f, #2e2269);
  8. -webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
  9. left,
  10. linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
  11. linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
  12. linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
  13. -webkit-mask-size: 55% 51%;
  14. -webkit-mask-repeat: no-repeat;
  15. position: absolute;
  16. left: 1px;
  17. top: 1px;
  18. }

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

方法二:clip-path

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

  1. <html>
  2. <body>
  3. <div class="outer">
  4. <div class="box"></div>
  5. </div>
  6. </body>
  7. <style>
  8. body {
  9. background-color: #55486b;
  10. }
  11. .outer {
  12. filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
  13. drop-shadow(0px 0px 1px #18121a)
  14. drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
  15. }
  16. .box {
  17. margin: 20px;
  18. width: 200px;
  19. height: 200px;
  20. border-radius: 12px;
  21. position: relative;
  22. background: linear-gradient(180deg, #3c2f4f, #2e2269);
  23. -webkit-clip-path: polygon(
  24. 20px 0%,
  25. calc(100% - 20px) 0%,
  26. 100% 20px,
  27. 100% calc(100% - 20px),
  28. calc(100% - 20px) 100%,
  29. 20px 100%,
  30. 0 calc(100% - 20px),
  31. 0 20px
  32. );
  33. clip-path: polygon(
  34. 20px 0%,
  35. calc(100% - 20px) 0%,
  36. 100% 20px,
  37. 100% calc(100% - 20px),
  38. calc(100% - 20px) 100%,
  39. 20px 100%,
  40. 0 calc(100% - 20px),
  41. 0 20px
  42. );
  43. position: relative;
  44. }
  45. </style>
  46. </html>

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号