在CSS中创建凹角[重复]

2024-03-26

是否可以在CSS中创建这样的凹角?如果是,你会怎么做?


莉亚·维鲁有一个如何执行此操作的描述 http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/:

通过使用径向渐变,您可以使用 负半径。您无需任何额外的支持即可做到这一点 元素。这有点棘手。

如果 CSS 渐变是,它也会回落到纯色背景 不支持。它将在 Firefox 3.6、最新的 Webkit 和 —希望 — Opera 11.10(他们宣布渐变支持 未来)。你可以添加一个-webkit-gradient()背景也,使 它几乎适用于当前使用的所有 Webkit 版本,但我 警告你:这并不容易,我个人拒绝花钱 我花了超过 5 分钟的时间去搞乱那个不标准的东西。

Here http://jsfiddle.net/blasteralfred/sCBgk/3/是其实施的现场演示。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在CSS中创建凹角[重复] 的相关文章

  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • 使用 CSS 修复自定义字体行高

    在我正在开发的新网络应用程序上使用自定义字体时 我遇到了一个奇怪的问题 这种自定义字体 FF DIN 似乎具有自然垂直的偏离中心的行高 这迫使我放置一些顶部填充黑客来补偿按钮和输入等元素的顶部空间 示例 绿色字体 Helvetica Neu
  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • 有没有办法在 Nokogiri css 中转义非字母数字字符?

    我有一个锚标签 file html stuff morestuff CHP 1 SECT 2 1 尝试提取 Nokogiri 中引用的内容 documentFragment at css stuff morestuff CHP 1 SECT
  • 带有透明背景的css3锯齿状边缘

    我试图在图像上的 div 上用 css3 制作锯齿状边缘 并且我需要它有一个透明的 bg bg 我的意思是锯齿状边缘在哪里 请参阅以下小提琴 http jsfiddle net ovb597yq http jsfiddle net ovb5
  • 如何在响应式设计中禁用缩放功能?

    在使用 iPad iPhone 和 或其他智能手机时 如何禁用响应式设计页面中的放大和缩小功能 有什么办法可以控制吗 创建 META 视口标签 并设置用户可扩展属性为 否 如下所示 更新的答案
  • Position:fixed 内的position:fixed: 哪个浏览器是正确的?

    将固定元素放置在另一个固定元素内的行为在 Chrome Safari 与 Firefox 中有所不同 这个答案很好地解释了预期的行为 https stackoverflow com a 28576596 1437016对于相对 div 内的
  • 平板电脑在第一次单击时悬停,在第二次单击时单击

    发布这个问题主要是希望证实我对该行为的怀疑 从而为其他程序员记录下来 因为我在网上没有找到任何记录 我正在构建一个网站 其导航栏具有以下属性 水平截面是 ul of li 和一些 li li s 两者都有 A n a 元素带您进入该主题 触
  • 未使用 Font Family Open Sans

    我在用谷歌的 Open Sans 字体 http www google com fonts UsePlace use Collection Open Sans在我的应用程序中 我已经按照指示定义了样式表 然后我在主体选择器上使用它 body
  • 复制 Chrome 默认输入的轮廓样式

    如何设置默认 Chrome 输入的轮廓样式 焦点上为橙色 使其在每个浏览器中看起来都相同 Chrome 风格似乎是textarea focus outline rgb 229 151 0 auto 5px outline offset 2p
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 如何以“打印”模式查看 Google 地图?

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐

  • 警告:require_once():http:// 包装器在服务器配置中被allow_url_include=0 禁用

    我试图通过以下方式在页面中包含 php 文件 require once http localhost web a php 我收到错误 Warning require once http wrapper is disabled in the
  • Jodatime的LocalDateTime第一次使用时很慢

    我目前正在一个 java 项目中测试一些 webapp 技术 并且想知道为什么页面有时加载速度很快 有时需要近 5 秒才能加载 我终于发现是这条线 LocalDateTime now new LocalDateTime 第一次调用时 需要很
  • 使用 par 时图例框宽度不正确

    我有问题 我的图例太大 我的代码 par mfrow c 1 2 hist alvsloss breaks 100 freq F main Histogramm density curve gaussian kernel n and fit
  • Dart - 试图理解“工厂”构造函数的价值

    如果我理解正确的话 A factory constructor affords an abstract class to be instantiated by another class despite being abstract 例如
  • 仅调用一个 Paint 事件

    我的问题是我有 8 个图片框 但一次只有其中一个调用其绘制方法 我的代码有点太大 所以我尝试尽可能地将其范围缩小到受影响的部分 我最好的猜测是 这并不是我的代码中的错误 而是对绘制事件如何工作的误解 我有一个继承自 PictureBox 的
  • Spark SQL - 从 sql 函数生成数组的数组

    我想创建一个数组的数组 这是我的数据表 A case class for our sample table case class Testing name String age Int salary Int Create an RDD wi
  • 重命名命令中的下划线(Perl 和 Unix shell)

    我正在尝试替换所有 下划线字符为 所有文件名中的连字符 mat在一个文件夹内 我输入不同版本但未成功 rename f w mat 有人可以向我解释一下出了什么问题吗 如果您正在使用基于 Perl 的rename http socialte
  • Export-CSV 仅获取“长度”

    当我尝试导出到 CSV 列表时 我只得到 长度 的所有数字 Count属性 直到到达分割点 然后将 CSV 数组分割到一个新文件 并使用从此时开始使用的新名称 可能是什么问题 RootFolder Get Content c DRIVERS
  • `agrep(...,fixed=F)` 的困难

    In agrep grep模糊匹配 它提到我可以设置参数fixed FALSE让我的模式被解释为正则表达式 但是 我无法让它工作 agrep asdf fdsa asdf fixed F integer 0 以上should匹配正则表达式
  • 使用 Codeigniter 将复选框值传递到 mysql 数据库

    我正在使用 CodeIgniter 和 mySQL 构建复选框表单 该表格包含 4 个选项 每个选项只有一个复选框 用户可以选择选项的任意组合 我想做以下事情 1 对于每个复选框 使用值 1 如果未选中 或 2 如果选中 并将这些值传递到数
  • 第一个项目需要注意什么

    我想创建一个程序 它将接受用户输入并创建一个 使用输入的日历 示例 约翰 康纳 2010 年 1 月 3 日生日 此信息还可按明显的顺序排序 姓氏 名字 日期 其他 它将能够将此信息打印为列表或日历 必须有例外 例如 1 3 10 放在 2
  • JTable 编辑/取消编辑代码不适用于重新排列的 JTable 列

    我使用以下代码对 JTable 列进行编辑 取消编辑 但是当用户重新排列列时 以下代码不起作用 SSCCE的代码如下 import javax swing JTable import javax swing table DefaultTab
  • System.Web.Routing.RouteCollection.GetRouteData 中的异常

    我在 iis7 上运行的 ASP NET MVC 代码中随机出现两个异常 Exception type InvalidOperationException Exception message Collection was modified
  • jquery Accordion - 从外部链接单击返回时记住活动区域

    我的链接位于页面上的 jquery 手风琴内部 当访问者单击其中一个链接然后单击后退按钮返回我的页面时 我希望打开包含该链接的手风琴 我的假设是我应该使用 navigation true 设置并将主题标签添加到不同的手风琴 但这对我不起作用
  • Instagram 基本显示 API 错误 - 无效范围:['basic'] 或无效的 redirect_uri

    我正在使用 Magento 2 4 1 安装了社交登录扩展 并在登录 Instagram 时出现以下错误 我正在使用混合身份验证库进行登录 error type OAuthException 代码 400 error message 无效
  • Linux Xwindow 转发上的 Visual Studio Code

    我的配置如下 OS DISTRIB ID Ubuntu DISTRIB RELEASE 14 04 DISTRIB CODENAME trusty DISTRIB DESCRIPTION Ubuntu 14 04 4 LTS NAME Ub
  • 更新 my.cnf 中的变量

    I set lower case table names 2在 my cnf 文件中 设置变量后 我重新启动了 mysql 服务器 但当我使用时 该值仍然是 0SHOW VARIABLES 我正在使用 MySQL 5 5 任何想法还需要做什
  • HTML:阻止子元素继承父元素的 [title] 属性

    问题是 当我为 wrapper 元素声明标题属性时 当光标落入 content 元素内时 也会显示工具提示 如何防止这种情况 继承 发生 div title example div div div 我只想显示工具提示between cont
  • 如何使用 gradle 任务解析 .json 文件并从中获取 json 数据?

    有没有一种方法可以在 gradle 任务的帮助下解析 xyz json 文件并获取其中的所有单独的 json 数据 例如 我想解析存储在我的资产文件夹中的 xyz json 文件中的数据并获取其中的所有值 例如 获取 类型 的值 type
  • 在CSS中创建凹角[重复]

    这个问题在这里已经有答案了 是否可以在CSS中创建这样的凹角 如果是 你会怎么做 莉亚 维鲁有一个如何执行此操作的描述 http lea verou me 2011 03 beveled corners negative border ra