让文字环绕圆形图片

简介:

样式如下

.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>

目录
相关文章
|
12月前
|
存储 分布式计算 Unix
Sun公司
Sun公司
818 66
|
JavaScript
vue 中安装并使用echart
vue 中安装并使用echart
307 2
|
Ubuntu API 开发工具
基于铜锁构建Web在线加密工具库
基于铜锁构建Web在线加密工具库
194 0
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
167 1
|
存储 JSON Linux
portainer使用二进制文件安装
portainer使用二进制文件安装
基于峰谷分时电价引导下的电动汽车充电负荷优化(matlab代码)
基于峰谷分时电价引导下的电动汽车充电负荷优化(matlab代码)
|
前端开发 测试技术 Android开发
自动化测试学习网站
自动化测试学习网站
577 1
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
656 0
|
人工智能 并行计算
matlab下的并行循环
解决matlab多层for导致运行速度慢的问题
560 1
|
存储 容灾 Cloud Native
什么是更适合政企的云|从传统 IT 容灾转向全栈云容灾
在云计算时代,面对黑天鹅事件,IT 人员如何利用容灾方案来保证业务连续性?云平台的容灾和传统 IT 容灾究竟有哪些不同?哪些因素影响着政企云平台的容灾设计?阿里云又有怎样的解决方案?这篇文章,将一一给出答案。
10566 0
什么是更适合政企的云|从传统 IT 容灾转向全栈云容灾