跨浏览器可拉伸圆角,具有语义代码和最少的图像使用。是否可以?

2024-04-29

我知道如果没有 Javascript 或图像,IE 不可能制作圆角。 如果禁用 js,JS 解决方案将无法工作,所以我想使用图像选项

我需要任何图像+ css解决方案来使跨浏览器兼容圆角divminimal ,容易制作和纯粹的semantic and W3C 有效 code, 可拉伸的 and 最少使用图像和 Photoshop 的努力。

我知道 FF 和 safari 可以使用纯 css,但我需要没有 javascript 的跨浏览器解决方案。我想用最少的 XHTML 代码和图像来制作。


See 25 个 CSS 圆角技巧 http://www.cssjuice.com/25-rounded-corners-techniques-with-css/.

鞭打盒 http://www.vertexwerks.com/tests/sidebox/- 创建具有视觉耀斑和绝对最少量的语义正确标记的圆角框。

alt text
(source: cssjuice.com http://cssjuice.com/wp-content/uploads/2007/07/the-thrashbox.png)

XHTML:

<div class="sidebox">
    <div class="boxhead"><h2>Test Headline</h2></div>
    <div class="boxbody">
        <p>This is a short sample paragraph.</p>
        <p>And another one.</p>
    </div>
</div>

可调整大小的盒子,具有可自由设计的角和表面 http://roundedbox.andreas-kalt.de/- 可调整大小的圆角框。

alt text
(source: cssjuice.com http://cssjuice.com/wp-content/uploads/2007/07/stylable-box_1185588162107.png)

两位作者都提到CSS 的滑动门 http://www.alistapart.com/articles/slidingdoors/关于拉伸性。

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

跨浏览器可拉伸圆角,具有语义代码和最少的图像使用。是否可以? 的相关文章

  • 根据窗口大小调整 div 及其内部内容的大小

    我已经查找了一百万种技术 但我无法让它发挥作用 我知道还有其他类似的帖子 如果它给任何人带来麻烦 我很抱歉 但我需要针对我的代码的具体说明 因为我很愚蠢 提前非常感谢 我希望 div 容器 contentContactBox 以及其中的所有
  • 如何仅在单击子级时触发父级单击事件

    子级和父级都是可点击的 子级可以是带有 jQ uery 单击事件的链接或 div 当我点击子事件时 如何只触发父事件而不触发子事件 DOM 事件阶段 活动分为三个阶段 Capture 第一阶段是 捕获 其中从事件处理程序开始调用
  • CSS变量名可以以数字开头吗?

    我想知道定义一个以这样的数字开头的 css 变量是否有效 root 1space 32px 这在 Chrome 上工作得很好 但是该代码没有经过验证https jigsaw w3 org css validator https jigsaw
  • 如何使用 CSS 或 javascript 创建圆角

    复制 使用 CSS 创建圆角的最佳方法是什么 https stackoverflow com questions 7089 what is the best way to create rounded corners using css 7
  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys
  • 放大 div 内的图像而不移动 div

    如何使图像在此 div 比例内 而不在悬停时进行实际的 div 缩放 所以我只想放大图像 这是代码 div img src some image div Use transform scale container display inlin
  • 如何修复连接的可排序对象位置错误的可拖动助手(部分由浮动/相对定位的父元素引起)?

    Preface 我遇到一个问题 当使用放置在浮动 相对定位的父元素中的可拖动元素 可排序元素时 可拖动帮助器偏移不正确 浮动父元素是 Bootstrap 列 其中多个可排序列表放置在一列中 可拖动列表放置在另一列中 Example 这是一个
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code
  • CSS 转换在toggleClass() 之后不起作用

    我创建了一个切换菜单 如图所示这个演示 http jsfiddle net 85Ryan Hrsdw 1 我添加了一个CSS过渡效果div nav menu 我用过max height 0 to max height 480px 当我单击菜
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • CSV 字段中引号前的空格

    从 CSV 规范 RFC 4180 https www rfc editor org rfc rfc4180 Spaces are considered part of a field and should not be ignored 显
  • PHP 生成唯一的字符串

    我在表中有一个 ID 列 用于存储行 ID 号 自动递增 例如 1 2 3 我想生成一个随机且唯一的字符串 该字符串只能包含数字 字母 破折号 和下划线 字符串长度为4 6 且唯一 有人可以帮我如何生成吗 谢谢 使用这个 base conv
  • 生成固定长度的随机数组[重复]

    这个问题在这里已经有答案了 我只是想更改我的代码 以便每次运行代码时都会生成固定长度 100 个整数的随机数组 而不仅仅是在代码中包含一个预先设置的数组 我对此很陌生 所以只需要正确方向的指导 谢谢 public class Selecti
  • Android BuildConfig 字段错误生成字符串

    在开始新项目的最后一天 我在构建配置中创建了一些变量 作为在发布和调试构建之间单独处理它们的好习惯 如下所示 buildTypes release minifyEnabled false buildConfigField String PA
  • 在 Ruby 中获取 system() 调用的输出

    如果我使用调用命令内核 系统 http ruby doc org core 2 2 0 Kernel html method i system在 Ruby 中 如何获取其输出 system ls 我想扩展和澄清混沌的答案 https sta
  • 将 C# 参数传递给 JS

    我有一个 C MVC 项目 我想每隔 X 秒刷新一次页面 我将代码放入cshtml文件中 但我需要从 C 中获取 X 假设它是 ViewBag Seconds 我怎样才能做到这一点 Razor 不关心它是输出 HTML 还是 javascr
  • 我需要从带有数据页的页面在组件中运行函数

    我有一个用于绘制图形或树的组件 并且我在页面中使用此组件 我的 axios 在页面上并提供数据 我需要将数据传递给组件的函数 然后从页面数据中绘制我的树 My Page
  • 检测 USB 连接 -- C# .Net CF 3.5

    我有一个在 Windows Mobile 6 1 设备上运行的应用程序 Net Compact Framework 3 5 我想检测 USB 连接何时发生变化 连接或断开连接 我最初使用的是SystemProperty CradlePres
  • 通过 ant 构建脚本将命令行参数传递给 Java

    运行以下命令时 ant targetname Dk1 v1 Dk2 v2 我想要将命令行参数传递给java like java whatever Dk1 v1 Dk2 v2 我需要从 Java 代码访问这些参数System getPrope
  • 当线程无法访问所有已用堆时查找 Java 内存泄漏

    我正在研究基于 Java 的大型系统中潜在的内存泄漏 或至少是内存浪费 JVM 运行时的最大堆大小为 5 GB 2 3GB 堆使用量是应用程序的预期基准 可能会有更高的峰值 在我正在调查的过载场景中 堆被填满 使用 Eclipse Memo
  • 如何在 Pygame 中制作边框

    我试图让游戏的某个区域周围有边框 并使用一种尺寸来不断更改我的代码 以便它适用于一种尺寸 这是代码 screen xpos ypos height width border width color def draw borders s x
  • H2O R 中的子集化

    我有一个 h2o 对象 子集的标准 R sub1 lt trans trans Type 1 我在水中也尝试过同样的方法 它不工作 sub1 lt trans trans Type 1 我也尝试过 sub1 lt h2o exec tran
  • ViewPager 具有不同的纵向和横向适配器

    在纵向模式下 我的ViewPager有 3 个片段 A B C 但在横向模式下 它只有 2 个片段 A 和 C 所以我创建了 2 个FragmentStatePagerAdapters 代表每种模式 问题是当屏幕方向改变时 ViewPage
  • 我可以将 Selenium WebDriver 与 Google Cloud Functions 结合使用吗?

    我正在尝试使用 Selenium 构建解决方案 我可以使用 Firebase Functions 通过 Selenium 初始化和加载网页吗 我发现一些资源说 不 然而他们没有给出任何来源 而且他们已经4岁了 在 Cloud Functio
  • nuget 创建两个包文件夹?

    OK 所以我最近重新安装了Windows 10并升级了vs2013 gt vs2015 此时我试图获取几个 nuget 包 我遇到的问题是 我有一个 nuget packages 文件夹 其级别与我的解决方案文件 通过 NuGet conf
  • 如何使用 C# 更新 Active Directory 属性。

    如何使用 C 更新 Active Directory 属性 就我而言 我有以下情况 对于每个用户都有一个WhenCreatedAD 中的属性 但我想要的是 如果whenDate设置的时间少于 30 天info归因于NEW在活动目录中 我怎样
  • uWSGI重启时停机

    每次当我有代码更新时重新启动服务器时 我都会遇到 uwsgi 问题 当我使用 sudo restart account 重新启动 uwsgi 时 停止和启动实例之间存在一个小间隙 导致停机并停止所有当前请求 当我尝试 sudo reload
  • UIAlertController 的警报无法关闭它

    我正在创建警报 但当用户按 确定 时无法将其关闭 我收到以下错误 2017 12 28 07 03 50 301947 0400 Prestamo 691 215874 API 错误 返回 0 宽度 假设 UIViewNoIntrinsic
  • 龙卷风网络和线程

    我是 Tornado 和 Python 线程的新手 我想要实现的目标如下 我有一个龙卷风网络服务器 它接受用户的请求 我想在本地存储一些数据 并定期将其作为批量插入写入数据库 import tornado ioloop import tor
  • 跨浏览器可拉伸圆角,具有语义代码和最少的图像使用。是否可以?

    我知道如果没有 Javascript 或图像 IE 不可能制作圆角 如果禁用 js JS 解决方案将无法工作 所以我想使用图像选项 我需要任何图像 css解决方案来使跨浏览器兼容圆角divminimal 容易制作和纯粹的semantic a