圆角矩形
Warning: not practical blog post, don't read, move on.
警告：不实用的博客文章，请勿阅读，继续前进。
So this is a post about a thought I had - creating rounded corners in IE678 by using roundness that they already have built-in, meaning the character O.
因此，这是一篇有关我的想法的文章-通过使用已经内置的圆度(即字符O)在IE678中创建圆角。
But first:
但首先：
- My opinion is that browsers that don't support border-radius should never ever get rounded corners. Let them rest in peace. 我的观点是，不支持边界半径的浏览器永远都不应弄圆角。 让他们安息。
- Don't use the technique below, it's just a thought. Plus it only has one corner 不要使用下面的技术，这只是一个想法。 而且它只有一个角
演示版(Demo)
Live page demo and a screenshot in IE6:
实时页面演示和IE6中的屏幕截图：
销售宣传 (Sales pitch)
- Rounded corners in IE 6, 7, 8IE 6、7、8中的圆角
- No images没有图片
- No JavaScript (a tiny self-rewriting CSS expression doesn't count)没有JavaScript(微小的自我重写CSS表达式不起作用)
- No extra markup 没有额外的标记
The drawbacks later.
缺点稍后。
好主意 (The big idea)
Use the letter O in monospace and position it in the corner.
在等宽字体中使用字母O，并将其放在角落。
实作 (Implementation)
标记(Markup)
As promised, nothing to see here:
如所承诺的，这里什么也看不到：
<p>Hello world</p>
JavaScript (JavaScript)
None. *
没有。 *
* The catch here is that a tiny piece of JavaScript exists as a CSS expression. It's there to trade for clean markup. You can remove it, but then you need a bit of extra markup.
*这里的要点是存在一小段JavaScript作为CSS表达式。 它在那里可以交换干净的标记。 您可以删除它，但随后需要一些额外的标记。
CSS (CSS)
p {
/* blah-blah, border, padding... */
border-radius: 16px; /* for good browsers */
background-image: expression(...); /* IE[678] */
}
The expression goes like:
表达式如下：
this.runtimeStyle.backgroundImage="none",this.innerHTML += "<b>O</b>"
(Expression stolen from Thierry, btw)
(顺便提一提，蒂埃里被盗)
The first part of the expression overwrites itself for performance reasons. You know that expressions are bad, cause they execute too often. Well, this.runtimeStyle shuts down the expression. If you wonder, runtimeStyle is IE thing which makes styles even more specific than inline style attributes. And this refers to the HTML element, in our case the P.
由于性能原因，表达式的第一部分将覆盖自身。 您知道表达式很糟糕，导致它们执行得太频繁。 好吧， this.runtimeStyle将关闭表达式。 如果您想知道， runtimeStyle是IE，它使样式比内联样式属性更加具体。 this是指HTML元素，在我们的例子中是P
The second part of the expression (note the , separator, that's kinda funny) updates the innerHTML of the P adding a B element. So the end result of running the expression at initial page load is DOM like:
表达式的第二部分(请注意,分隔符，这有点好笑)更新了P的innerHTML并添加了B元素。 因此，在初始页面加载时运行表达式的最终结果是DOM，如：
<p>Hello world<b>O</b></p>
And if you prefer, you can put that markup and get rid of the CSS expression.
而且，如果您愿意，可以放置该标记并摆脱CSS表达式。
The rest of the CSS is just wrestling to position the O in the corner:
CSS的其余部分只是在努力将Ohtml" title=定位>定位在角落：
b {
background: white;
display: block;
font-family: monospace;
font-size: 72px;
font-weight: bold;
height: 41px;
left: -18px;
overflow: hidden;
position: relative;
top: -74px;
width: 25px;
}
And this is it.
就是这样。
缺点 (Drawbacks)
I'm sure my critical readers can think of drawbacks but let me start:
我确定我的关键读者可以想到缺点，但让我开始：
- In general principle, why would you care about rounded corners in browsers that don't know about border-radius? 通常，为什么您会关心那些不知道边界半径的浏览器中的圆角？
You can't have different background inside and outside the box, because you can't style the inside of the O with a color different than the outside. However you might be able to find a character that can.
框内和框外的背景不能不同，因为O的内部不能使用与外部不同的颜色来设置样式。 但是，您也许可以找到一个可以的角色。
- Playing with font sizes and positions is tricky. However there's probably a better way to position the O 使用字体大小和位置很难。 但是，可能有更好的方法来放置O
- If you managed to select text outside the "hello world" (if you do Select-All for example) to copy, you'll paste "hello worldO" 🙂 Which is exactly what screen readers will read and your page might sound like a weirdO 如果您设法在“ hello world”之外选择文本(例如，如果执行“全选”)，则将粘贴“ hello worldO” O这正是屏幕阅读器将读取的内容，并且您的页面听起来像是奇怪的
所以那里(So there)
Maybe someone else have already thought of the idea of using a character as a corner (and has a better implementation), but that's all from me. I'm not recommending this approach, just an itch I needed to put out there. Thanks for reading!
也许其他人已经想到了将角色用作角点的想法(并具有更好的实现)，但这全都是我的。 我不推荐这种方法，只是我需要解决的一个问题。 谢谢阅读！
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: https://www.phpied.com/a-rounded-corner/
圆角矩形
