让文字环绕圆形图片

简介:

样式如下

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

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>

目录
相关文章
|
4月前
在图片上的文字背景,颜色是黑色?
在图片上的文字背景,颜色是黑色?
28 0
在图片上的文字背景,颜色是黑色?
|
7月前
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
46 1
|
7月前
|
数据可视化 定位技术 开发者
黑白或彩色线稿地图设计定制装饰画中线条轮廓素材底图获取方法合集
黑白或彩色线稿地图设计定制装饰画中线条轮廓素材底图获取方法合集
|
前端开发
Shapes布局-文字环绕动画
Shapes布局-文字环绕动画
128 0
|
算法 定位技术 C#
C#开发:不规则裁切图片
C#开发:不规则裁切图片
160 0
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
|
前端开发
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条
260 0
基于canvas绘制边框环绕进度条
平铺文理+拉伸按钮图片
平铺文理+拉伸按钮图片
83 0
|
C# 小程序
给图片加上阴影效果
原文:给图片加上阴影效果 今天写一个小程序有一个给图片加上阴影的需求,记得WPF的Effect中就有阴影特效,就打算用它了。代码如下:     using (var imageStreamSource = File.
1221 0
|
前端开发 Android开发
利用PorterDuffXfermode绘制图片文字
PorterDuffXfermode是Android中用来对图层进行操作的类,类似于数学中的交集、并集,将上层(src)和下层(dst)进行特定的方式进行混合显示。
1061 0

热门文章

最新文章