图像周围的 CSS div 边框半径答案

【问题标题】：CSS div border radius around image图像周围的 CSS div 边框半径
【发布时间】：2013-06-10 20:08:45
【问题描述】：

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

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

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

在皮特的帮助下。

这里的问题是

box-shadow

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

编辑：感谢您提供的所有答案和支持，帮助我解决了这个 css 问题。

它应该发生的事情是：

看图。
查看我发布的 jsfiddle 链接。
带边框的内容需要一个盒子阴影、一个边框半径和一个渐变。
这需要是动态的。

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

【问题讨论】：

嗨，韦斯利，欢迎来到 SO。通常这里的问题是单问题单答案，我不知道你是否会用通用的“我该怎么做”得到很好的回应。人们喜欢看到你付出了一些努力 ;) 但无论如何，你在 border-radius 的正确轨道上，也许向我们展示你的尝试并提出一个我们可以回答的具体问题。
圆角部分可以用border-radius，这个链接会告诉你更多css3.info/preview/rounded-border
你好史蒂夫，现在我对此一无所知，真的很绝望。这就是为什么我在这里寻找答案。一些想法也会非常好或提示。所以我在它周围有一个段落，我在它周围做了一个 1px 实心边框，以查看它的结束位置，直到图像对齐的部分才结束。
图像是否会改变大小，即它是动态的还是始终保持不变？
它是动态的。文字和图片将通过wordpress生成。

标签： css html border

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

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

【讨论】：

哇，这看起来很有希望。我会尝试实现这一点。如果成功，我会批准这个答案，这应该回答我的问题谢谢！。
你好皮特，所以这是当前的问题jsfiddle.net/peteng/cu59r 当我打开盒子阴影时，它也会对图像产生阴影。
嗨，是的，你从来没有说过任何关于阴影的事情，这对于需要在渐变背景上的动态图像来说是不可能的
感谢皮特回答我的问题。一开始我虽然在完成基础之后我可以解决其余的问题，但似乎不可能，这就是为什么我做了一些额外的编辑，看看人们是否可以帮助我实现最终目标。但现在我知道我不可能通知我的客户。再次非常感谢您。

【解决方案2】：

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

我的建议：使用 Photoshop 设计框，然后将其作为背景图像添加到两个不同的 div 中（文本框应该在图像所在的位置具有透明背景）。在此之后，您可以以正确的方式放置 div，如有必要，使用包装 div。

缺点：不响应、静态等

【讨论】：

你好骷髅3r7，谢谢你的建议。我遇到的问题是它需要是动态的。它是否响应这个项目并不重要。之所以需要动态是因为文字和图片会通过wordpress生成。

【解决方案3】：

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

只需添加

float: right/left;
margin: 0;

看看这是否有效。

【讨论】：

您好，这就是我所拥有的，但现在困难的部分来了。文本需要在其周围有一个边框半径。图像需要保持在边界之外。这也必须是动态的。

【解决方案4】：

看到这个DEMO。这是你所期待的。

<figure style="float:right;">

【讨论】：

【解决方案5】：

在我看来这是一个非常好的问题:)

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

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

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

我更喜欢我的变体，因为它有点更灵活 - 如果需要更改 - 只有 css 会更改，无需重新制作任何其他颜色或不同的图像半径...根本不需要图像 :) 虽然您需要对浮动到左侧的图像进行不同的样式设置，以及在文本中间的样式。

【讨论】：

【解决方案6】：

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

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

Example

不过，Pete 的解决方案更容易实现，但我希望这个示例也能有所帮助。 :)

【讨论】：

【解决方案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 本身可以并且应该保持相当精简。

【讨论】：