让文字环绕圆形图片

简介:

样式如下

.curve { 
  width: 33%; height: auto;
  min-width: 150px;
  float: left;
  margin-right:2rem; 
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

html

 <div class="content">
						<img src="assets\images\timg.jpg" style="width:30%;height:30%;" class="curve">
                            <p>Write a brief intro about yourself. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>    
         
        <p>It's a good idea to include your personal interests and hobbies as well. Commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                         
                        </div>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

目录
相关文章
测试图片随文字上下居中
测试图片随文字上下居中
|
10月前
|
前端开发
Shapes布局-文字环绕动画
Shapes布局-文字环绕动画
80 0
|
11月前
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
92 0
|
12月前
|
算法 定位技术 C#
C#开发:不规则裁切图片
C#开发:不规则裁切图片
118 0
|
前端开发 JavaScript
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单
用不到80行代码复原了NaiveUI中的渐变文字组件,内容不多,非常简单,小小娱乐一次。。。。。。。
310 0
平铺文理+拉伸按钮图片
平铺文理+拉伸按钮图片
50 0
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
|
前端开发
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条
191 0
基于canvas绘制边框环绕进度条
|
C# 小程序
给图片加上阴影效果
原文:给图片加上阴影效果 今天写一个小程序有一个给图片加上阴影的需求,记得WPF的Effect中就有阴影特效,就打算用它了。代码如下:     using (var imageStreamSource = File.
1174 0
WPF-3D动效-文字球形环绕
原文:WPF-3D动效-文字球形环绕 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013224722/article/details/81784443 费劲写了一个动效,却要被砍掉,心碎.
1457 0