CSS div 图像周围的边框半径

Question

我希望有人能回答这个问题，因为我的客户想要这个，但现在我不知道如何在 css 中构建它。

有人知道如何构建这样的东西吗？ 应该是这样的，如果您将图像向右对齐，您的文本将与图像很好地对齐。

这里我想要做的是构建一个 div，在所有已输入的文本周围创建边框，然后将其与图像对齐。我怎样才能做到这一点？

在皮特的帮助下。

问题是

box-shadow

此外，该框在后期还需要透明。 这是我现在的结果http://jsfiddle.net/peteng/cu59r/ .

编辑:感谢您提供的所有答案和支持来帮助我解决此 CSS 问题。

应该发生以下事情:

1. 看图片。
2. 请参阅我发布的 jsfiddle 链接。
3. 带有边框的内容需要一个盒子阴影、一个边框半径和一个渐变。
4. 这需要是动态的。

再次感谢社区的帮助，对我来说意义重大。

Answer 1

通过使用几张图像，您应该能够创建您想要的内容

html

<div id="wrapper">
    <div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div>
    <!--put text here-->
    <p>Text</p>
</div>

CSS

#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;}
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;}
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;}

Example

更新

根据您现在想要的内容进行所有编辑(而不是原始问题中的简单 l 形状)。由于以下原因这是不可能的

文本必须有背景颜色，这意味着您需要主包装上的背景颜色，以便它形成 l 形状。这意味着获得图像圆 Angular 所需效果的唯一方法是在包装背景上放置另一个背景(这意味着您不能有任何透明的东西，否则包装背景颜色将显示出来)

您所能希望的最好的结果就是告诉客户，如果他们想要那种形状，他们必须将图像保持在精确的尺寸，并将文本保持在特定的长度，然后您可以使用简单的背景图像