CSS实现底部弧度效果

这篇具有很好参考价值的文章主要介绍了CSS实现底部弧度效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图如下

CSS实现底部弧度效果,css,css,前端

说明:
使用伪类处理,先将元素自身定位为relative;
伪类设置content:‘’,并相对定位为absolute,通过设置left ,top 值,改变width和和left来调节弧度。宽度需大于100%,将left设为(100%-宽度)/ 2,伪类宽度越接近100%,弧度越大文章来源地址https://www.toymoban.com/news/detail-550352.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现底部弧度效果--卡片样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .card-wrap {
            width: 100%;
            height: 188px;
            position: relative;
            z-index: -1;
            overflow: hidden;
        }

        .card-wrap:after {
            width: 130%;
            height: 168px;
            position: absolute;
            /* 将left设为(100%-宽度)/ 2 */
            left: -15%;
            top: 0;
            z-index: -1;
            content: '';
            border-radius: 0 0 50% 50%;
            -webkit-mask-image: linear-gradient(to bottom,#000000,transparent);
            mask-image: linear-gradient(to bottom,#000000,transparent);
            background: linear-gradient(144deg, #da7b4d 0%, #57c2b8 100%);
        }

        .card-inner {
            position: absolute;
            bottom: 10px;
            width: 100%;


        }
        .card-info {
                margin: auto;
                width: 92%;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
                box-shadow: 0 4px 8px 0 rgba(190, 195, 199, 0.5);
                border-radius: 8px;
            }
    </style>
</head>

<body>
    <div class="card-wrap">
        <div class="card-inner">
          <div class="card-info">内容</div>
        </div>
       
      </div>
</body>

到了这里,关于CSS实现底部弧度效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端小技巧:学会通过CSS Hover和JS实现图片放大镜效果

    数据来源: ChatGPT 今天,我们来看一个鼠标悬停出现图片放大镜效果,这是一个比较实用且炫酷的纯CSS和JS实现的页面效果。 HTML HTML代码非常简单,我们只需要一个div容器,内部嵌入一张图片,再添加一个用来显示放大镜的div元素。 CSS CSS代码是实现放大镜效果的重要部分,

    2024年02月02日
    浏览(73)
  • 前端常用js、css效果

    效果 主要整理了几个常用的,方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下移动 樱花飘落 添加插件sakura.js就可以了,不用什么代码

    2024年02月02日
    浏览(42)
  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具,可

    2024年02月12日
    浏览(39)
  • 前端必学的CSS3波浪效果演示

    使用 translateX 和 translateZ 属性创建波浪效果: 使用场景: 适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。 可以用于创建具有起伏效果的海浪、水面波纹等效果。 优点: 通过3D变换,可以实现更加真实的波浪效果。 可以通过调整 translateX 和 translateZ 的值来控制波浪

    2024年02月02日
    浏览(49)
  • 通过css实现-让页面的footer始终位于底部

    当页面内容全部占满时,滑动到最下面,显示footer在底部; 当页面内容不满时,footer也是在最底部显示。 具体实现代码如下:

    2024年02月16日
    浏览(36)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(92)
  • 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月15日
    浏览(40)
  • css 实现3D效果

    主要用到两个属性:transform-style属性和animation属性 transform-style是用来开启3D效果的属性,而animation是用来让元素实现3D的动画效果 我们以制作一个3D的立方体为例。 transform详细属性,animation详细属性 先把html部分写出来,我们需要把立方体的6个面都先表示出来。 上面分别把

    2024年02月09日
    浏览(45)
  • css 实现太极效果

    本次主要介绍::after,::before,box-shadow这三个属性。 ::after,::before这两个是伪类选择器,box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容 , 值可以为空,但是不能不写,如果不写的话伪类选择

    2023年04月22日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包