热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

你知道怎么利用css实现内凹圆角么

本文为大家介绍了利用径向渐变来实现背景透明的内凹圆角的方法,希望可以帮助到大家。

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

从左到右的红到蓝渐变

加百分比调整渐变范围

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 20%, blue 80%);
}

浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 50%, blue 50%);
}

颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了

div {
   height: 100px;
   width: 200px;
   background-image: linear-gradient(90deg, transparent 50%, blue 50%);
}

同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent

/* 径向渐变主体 */
.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。

应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果

/* 径向渐变主体 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

同理四个方向, 调整圆心位置即可

/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}

/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
}

同样,不想这么圆角,也是可以椭圆的,半径设两个参数, 就是椭圆。

径向渐变有很多参数大家可以自己再尝试调整,可以出现各种奇怪的形状,这里就不演示了。相对来说,内凹圆角就够用了

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}


推荐阅读
  • 简雍:东汉末年刘备麾下的智囊,性格直率豪爽、不拘小节
    简雍,字宪和,涿郡人,原姓耿,后因幽州方言将“耿”读作“简”,遂改姓简。他是东汉末年至三国时期刘备的重要谋士。简雍性格直率豪爽,不拘小节,年轻时便与刘备结识,成为其核心智囊之一。他在刘备麾下屡献良策,为刘备的崛起和发展做出了重要贡献。 ... [详细]
  • 如何在 PHPStorm 2017 中禁用参数名称提示功能
    在 PHPStorm 2017 中,若需禁用参数名称提示功能,可在设置面板中通过搜索 "hints" 进入相关路径,具体为:编辑器 > 常规 > 外观 > 显示参数名称提示,并取消该选项前的勾选。这一操作将有效关闭参数名称提示,提升代码编辑的整洁度和专注度。 ... [详细]
  • 本文详细介绍了 PHP 中 `sprintf` 函数的使用方法,并通过具体示例进行说明。例如,使用 `%%` 作为参数时,`%%` 会被替换为 `%`。通过 `echo sprintf($str)` 可以验证这一行为,返回的结果是“测试一下 % 这个参数,会被替换成什么”。此外,文章还探讨了 `sprintf` 函数在格式化字符串中的多种应用场景,包括数字格式化、日期时间处理等,帮助读者全面掌握该函数的使用技巧。 ... [详细]
  • 理解和应用HTTP请求中的转发与重定向机制
    在HTTP请求处理过程中,客户端发送请求(通常简称为req),服务器进行相应处理后返回响应(通常简称为res)。理解和应用客户端的转发与重定向机制是前端开发的重要内容。这两种机制在Web开发中具有关键作用,能够有效管理和优化用户请求的处理流程。转发机制允许服务器内部将请求传递给另一个资源,而重定向则指示客户端向新的URL发起新的请求,从而实现页面跳转或资源更新。掌握这些技术有助于提升应用的性能和用户体验。 ... [详细]
  • 本文详细探讨了Laravel框架中路由和控制器的操作实例,旨在为开发者提供深入的理解和实用的参考。通过具体的示例,读者可以更好地掌握如何在Laravel中配置和使用路由及控制器。此外,文章还提供了丰富的PHP编程技巧和最佳实践,帮助读者提升开发效率和代码质量。 ... [详细]
  • PHP编程中的命名规则与最佳实践 ... [详细]
  • VC维在机器学习中的应用与解析
    VC维在机器学习中的应用与解析VC维是指在机器学习中,一个假设空间能够正确分类的最大样本数量。具体而言,如果一个假设空间能够将N个样本以所有可能的 \(2^N\) 种方式完全分开,则称该假设空间具有N的VC维。VC维是衡量模型复杂度的重要指标,对于理解模型的泛化能力和过拟合风险具有重要意义。本文详细探讨了VC维的定义、计算方法及其在机器学习中的应用,并通过实例分析展示了其在模型选择和评估中的关键作用。 ... [详细]
  • PHP中函数名、常量名和变量名大小写转换及规范详解
    在PHP编程中,初学者常常会遇到关于函数名、常量名和变量名大小写的问题。本文详细解析了PHP中这些名称的大小写敏感性及其命名规范,帮助开发者更好地理解和使用PHP。具体而言,文章探讨了PHP中的常量名是否区分大小写,自定义函数名的大小写敏感性,以及类名的大小写规则。此外,还提供了实用的代码示例和最佳实践,以确保代码的可读性和一致性。 ... [详细]
  • C++入门必备:首个博客知识点汇总
    本文总结了C++初学者需要掌握的关键知识点,特别强调了成员类型的区分。其中,protected成员与private成员在本类中的作用相同,但protected成员允许派生类的成员函数访问,而private成员则不允许。此外,文章还介绍了其他重要的C++基础概念,如类的构造函数、析构函数以及继承机制,为初学者提供了一个全面的学习指南。 ... [详细]
  • Kafka核心理论问题汇编【持续更新中】
    本文汇总了Kafka的核心理论问题,涵盖了常见的技术难点和解决方案。内容将持续更新,旨在为开发者提供全面的参考。文章源自博客园,作者呱嗒呱嗒,转载时请注明出处。 ... [详细]
  • 在使用Block时,正确的声明方法和确保线程安全是至关重要的。为了保证Block在堆中分配,应使用`copy`修饰符进行声明,因为栈中的Block与栈的生命周期绑定,容易导致内存问题。此外,还需注意Block捕获外部变量的行为,以避免潜在的循环引用和数据不一致问题。建议深入研究相关文档,以掌握更多高级技巧和最佳实践。 ... [详细]
  • 在CodeIgniter框架中集成新库文件的过程中,我遇到了一些困惑。具体来说,在跟随nettuts的认证教程时,对于在Welcome控制器中添加的构造函数代码,特别是关于Session的验证部分,我感到不太理解。这部分内容涉及如何确保Session已经初始化并具备相应的功能,这对于实现用户认证至关重要。为了更好地掌握这一知识点,我计划深入研究CodeIgniter的官方文档,并参考更多相关资源,以确保能够正确地集成和使用新库文件。 ... [详细]
  • PHP 数组逆序排列方法及常用排序函数详解 ... [详细]
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • 在360浏览器中配置自动刷新功能的详细步骤与技巧。无需安装额外插件,用户可以通过简单的设置实现页面自动刷新,从而避免频繁手动按下“Ctrl+R”或“F5”键。本文将详细介绍如何在360浏览器中启用这一功能,并提供一些实用的技巧,帮助用户提升浏览体验。 ... [详细]
author-avatar
I_amkaiman
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有