CSS div边界半径图像周围

Question

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

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

这里我要做的是构建一个div围绕所有已键入的文本边框，然后将其与图像对齐。我怎么能这样做？

在皮特的帮助下。

这里的问题是

box-shadow

此外，盒子需要在舞台后期透明。 这是我现在的结果http://jsfiddle.net/peteng/cu59r/。

编辑：感谢您提供所有答案和支持，以帮助我解决此问题。

应该发生以下事情：

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形。这意味着获得图像圆角所需效果的唯一方法是在包装背景上放置另一个背景（这意味着你不能有任何透明的东西，否则封面背景颜色只会显示）

您可以希望的最好的方法是告诉客户，如果他们想要这种形状，他们必须将图像保持精确的大小并将文本保持为特定长度，然后您可以使用简单的背景图像

Answer 2

我认为没有一种简单的方法可以像这样设置文本框的样式。

我的建议：用Photoshop设计盒子，然后将它作为背景图片添加到两个不同的div中（文本框应该有一个透明的背景，图像应该是）。在此之后，您将以正确的方式定位div，如果需要，使用包装div。

缺点：没有响应，静态等等

Answer 3

您可以简单地浮动图像，它将如下所示：http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif

添加

float: right/left;
margin: 0;

看看是否有效。

Answer 4

请参阅此DEMO。这是你期待的。

<figure style="float:right;">

Answer 5

在我看来，这是一个非常好的问题：）

我的简短回答是 - 是的，有可能 - 见Pete's answer。我理解这种情况的困难，而且我也理解这种解决方案缺乏灵活性的事实，因为它结合了css border-radius和图像 - 所以=＆gt; a）在IE8及以下版本看起来很奇怪，b）如果我们改变一些css，它会看起来很奇怪：）

我自己的答案是仅使用css来做到这一点，但主要问题将无法解决，靠近图像的角落不会被我所知道的css中的任何方式舍入。

考虑一下这个小提琴 - http://jsfiddle.net/skip405/m6cpb/1/

我更喜欢我的变体，因为它有点更灵活 - 如果需要改变 - 只有css会改变，不需要重新制作任何其他颜色或不同颜色的图像半径......根本不需要图像:)尽管你需要不同地调整浮动到左边的图像，并且还需要在文本的中间设置样式。

Answer 6

Skull3r7对background-image有一个好主意。此外，可以使用两个带（动态）文本的div和另一个带有“顶部边框”的div。

• 第一层包含文本“占位符”和“底部边框”，
• 第二层包含“顶部边框图像”（覆盖第一层的顶部）
• 第三层包含可见文字。

Example

然而，实施Pete的解决方案更容易，但我希望这个例子也能提供帮助。 ：）

Answer 7

给出以下HTML结构的另一种替代建议：

<div class="imgContainer">
    <img src="http://placekitten.com/150/150" />
    <p><!-- text excised for brevity --></p>
</div>

和CSS：

.imgContainer {
    border: 1px solid #000;
    padding: 0;
    width: 80%;
    margin: 0 auto 1em auto;
    border-radius: 1em;
}

.imgContainer img {
    float: right;
    margin: -1px -1px 0 0;
    padding: 0 0 0.5em 0.5em;
    border: 1px solid #fff;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.imgContainer p {
    margin: 0.5em;
    padding: 0;
    text-indent: 0.5em;
}

JS Fiddle demo

这应该允许使用任何尺寸的图像（当然，只要它适合容器元素），并且具有响应性，并且适应于更改的尺寸。

不幸的是，我想不出在img本身的边界上提供曲线的方法。在正面，它避免了不必要的包装和重新包装元素，因此HTML本身可以， ，保持相当精益。