问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用 CSS 实现卡片顶部内凹效果？

头像
guangzan
    4911137

    问题描述

    用 HTML、CSS 实现一个宽度为 300px, 高度为 auto 的长方形卡片， 要求：

    • 卡片圆角 20px
    • 背景使用渐变色进行填充
    • 边框 2px，边框颜色是与背景色不同的另一种渐变色
    • 卡片顶部有小幅度的内凹效果， 也就是说长方形顶部那条边为弧线，其他三边为直线。

    目标效果

    image.png

    截图为卡片顶部部分。

    css3html5svgcanvasclip-path
    阅读 1.9k
    5 个回答
    得票最新
    头像
    643104191
      2.5k21137

      image.png
      你切个这个图来盖住你的卡片不就行了?

      头像
      42
        4.1k2625
        头像
        GrandSong
          21
          新手上路，请多包涵

          思路1：css border-image

          把一个图片，以九宫格的切分方式，弹性地适应盒模型。
          这个属性，可以指定盒子顶部和底部的固定高度的边框图案，同时让中间高度自由伸缩。
          要正确使用这个属性，需要你认真学习和尝试。
          我就不在这里赘述了。
          反正我自己的一些按钮就用了，效果不错。

          思路2：clip-path + drop-shadow

          先用 clip-path，切掉顶部一部分，留下这个内凹。
          然后用 drop-shadow(0 0 1px)，近似地描边。严格来说，这不是边框，而是渐变的阴影。凑合吧。

          头像
          乔治
            13k1329

            1740735154289.png

            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内凹顶部卡片效果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        
        .card {
            width: 300px;
            min-height: 200px;
            position: relative;
            margin: 20px;
        }

        .card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            -webkit-mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            mask: 
                linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .content {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 20px;
            clip-path: path('M 20 0 Q 150 20 280 0 L 300 200 L 0 200 L 0 0 Z');
            padding: 30px 20px 20px;
            box-sizing: border-box;
            color: white;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="content">
            <h2>内凹顶部卡片</h2>
            <p>这是一个带有顶部内凹效果的卡片设计，使用CSS的clip-path和渐变色实现。</p>
            <p>卡片宽度为300px，高度自适应内容。</p>
        </div>
    </div>
</body>
</html>
            头像
            llhhc
              2
              头像
              汝何不上九霄
                4.8k61947
                新手上路，请多包涵
                <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Card</title>
    <style>
        /* 豆包写的 */
        .card {
            width: 300px;
            height: auto;
            position: relative;
            overflow: hidden;
            border-radius: 20px;/*卡片圆角 20px*/
            padding: 2px;
            background: linear-gradient(45deg, #0099ff, #ff66cc);/*背景使用渐变色进行填充*/
        }

        .card-inner {
            background: linear-gradient(135deg, #e6f7ff, #fce8ff);/*边框 2px，边框颜色是与背景色不同的另一种渐变色*/
            border-radius: 18px;
            padding: 20px;
        }
        

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: inherit;
            clip-path: ellipse(100% 40% at 50% 0);/*实现卡片顶部内凹弯曲*/
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="card-inner">
            <p>这是卡片的内容。</p>
        </div>
    </div>
</body>

</html>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题