小编Luk*_*uke的帖子

HTML5 电子邮件类型和模式

将新的 HTML5type值（例如email、tel等）与属性结合使用之间是否存在任何问题、冲突或其他问题pattern。

我不是指 HTML5 浏览器兼容性\xe2\x80\x94，只是这些属性的新值与该pattern属性结合使用时所产生的直接影响。

为了清楚起见，我将使用几个例子type="email"

A. 仅键入属性。

<input type="email">\n

B. 仅有模式属性

<input type="text" pattern="[email regex]">\n

C. 电子邮件和模式属性一起使用

<input type="email" pattern="[email regex]">\n

我觉得你通过新的 HTML5 类型值获得了更多语义价值；然而，正则表达式更容易控制，因为 email@localhost 仅通过所使用的电子邮件值有效。

如果他们是重复的，我很抱歉，我环顾四周但没有看到这个特定的问题

编辑

我发现提到了两者结合使用时可能产生的负面影响。但是，我不确定消息来源的可信度。

\n

由于这两种验证电子邮件地址的方法各有利弊，因此您可以决定使用哪一种。您不应尝试同时使用它们，因为这可能会导致支持这两种功能的浏览器发生冲突。使用 type=\xe2\x80\x9demail\xe2\x80\x9d 的优点是它在语义上是正确的，使用pattern属性的优点是网络上有几个易于使用的polyfills，这确保了对更大的支持受众范围。

\n

来源

请务必彻底测试两者是否同时使用。如果我发现任何负面影响，我会更新问题。

MDN Web 文档声明以下都是有效属性：

transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

它还声明所有当前（2021 年 11 月）浏览器都完全支持，当然 IE11 除外。Caniuse.com 确认此浏览器支持transform-box.

但是，当我尝试使用transform-box: content-box;、transform-box: border-box;或 时transform-box: stroke-box;，Chrome 开发工具会将这些报告为“无效属性值”：

我错过了什么吗？

使用下面的代码,我只能border-image为其底部生成线性渐变.如何修改代码以使其成为顶级代码？

div {
    /* gradient shining border */
    border-style: solid;
    border-width: 3px;
    -webkit-border-image: -webkit-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    -moz-border-image: -moz-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    -o-border-image: -o-linear-gradient(
        left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 0 100% 0/0 0 3px 0 stretch;
    border-image: linear-gradient(
        to left,
        rgba(0,0,0,1) 1%,
        rgba(0,255,255,1) 50%,
        rgba(0,0,0,1) 100%
    ) 0 …