CSS，是否可以创建这个角落效果

我的CSS功能非常有限。我不知道是否有创建该类型的效果的方式：CSS，是否可以创建这个角落效果

这里的直播现场，我已经有阴影。我只需要把这两个红色的角落元素。

在此先感谢您的任何帮助！

2011-03-29 Denise

哎呀，这里的直播现场与阴影框：HTTP：// www.wendyfawcettlaw.com/ – Denise 2011-03-29 02:54:17

仅供参考 - 具有巨大阴影（即8）的现场网站上的文字非常难以阅读。你可能会认为它有点让人失望。另一方面FF 4看起来不错。 – NotMe 2011-03-29 04:00:21

我不认为这是可能的纯粹的CSS，你可能需要一些额外的HTML。我的建议是使用一些绝对定位的DIV与红色的角落。

2011-03-29 03:03:24 dvhh

干杯。

2011-03-29 03:24:18

你应该把它们放在后面，否则我不能选择角落里的文字。 – alex 2011-03-29 03:28:34

应该指出，IE8及以下版本不支持box-shadow属性（即不会出现阴影），因此请务必评估您网站的目标受众，并在必要时为这些浏览器设置适当的回退。 – peterjmag 2011-03-29 03:45:49

@alex谢谢。 @Denise您可以移动段落上方的redcorner div，以便能够在角落中选择文本。 @peterjmag谢谢你的提示。 @Denise peterjmag是正确的，如果你想在IE中出现阴影，你应该创建一个后备。 – 2011-03-29 05:50:43

您可以使用1张单张图像进行此操作，然后仅使用一个元素将图像与边框图像平铺。非常干净简约的标记和CSS。如果你对这个解决方案感兴趣，我可以发布一个关于它是如何工作的解释，因为它起初很难理解，但一旦你得到它，你可以做出一些非常酷的边界。

2011-03-29 03:32:35 Mark

我宁愿建议使用图片，因为您可以稍后改变您想要做的任何风格，并为您的网站插入有趣的设计变化乐趣。

@Jaffaff Gilbert已经给你提供了简单的html + css代码的解决方案，我会告诉你关于使用多个背景的CSS3。

而你并不需要添加HTML（但只会或每体面的浏览器无法正常工作的Internet Explorer）

background: 
    url(image_1.gif) top left no-repeat, 
    url(image_2.gif) bottom right no-repeat;

2011-03-29 03:41:00 Littlemad

谢谢，这个替代方法很有用。 @Denise如果你不考虑IE8（需要后备），你最好添加这种方式。 – 2011-03-29 05:58:48

回答