CSS -如何使文本沿着边框的半径移动
CSS -如何使文本沿着边框的半径移动
提问于 2019-06-06 05:38:52
下面是我目前的情况：https://codepen.io/joondoe/pen/gJJLPx。
我喜欢它的排版设计，如下图所示：
在上图的右下角，你可以看到图片边框后面的文字，所以我假设是一个圆角框
我也会对我的css做同样的事情，但它失败了。到目前为止，文本溢出了边界。
下面是我的代码片段：
.round_box{
width:30%;
margin:auto;
text-align:left;
border: solid blue;
border-top-right-radius: 40%;
border-bottom-right-radius: 40%;
}<div class="round_box" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
回答 1
Stack Overflow用户
发布于 2019-06-06 05:44:41
您可能会使用css shape-outside。
.circle{
width: 10em;
height: 10em;
border-radius: 5em;
background: #accede;
margin: 1em;
float: right;
shape-outside: circle(50%);
}
.content{
max-width: 500px;
}<div class="circle"></div>
<div class="content">
Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.
</div>
有关更多形状，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56468362
复制相关文章
相似问题