让文字环绕圆形图片

简介:

样式如下

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

目录
相关文章
|
3天前
|
C# 开发工具 数据安全/隐私保护
C# 给图片添加文字水印
C# 给图片添加文字水印
|
11月前
|
前端开发
Shapes布局-文字环绕动画
Shapes布局-文字环绕动画
82 0
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
97 0
|
算法 定位技术 C#
C#开发:不规则裁切图片
C#开发:不规则裁切图片
121 0
|
前端开发 JavaScript
NaiveUI中看起来没啥用的组件(文字渐变)实现原来这么简单
用不到80行代码复原了NaiveUI中的渐变文字组件,内容不多,非常简单,小小娱乐一次。。。。。。。
320 0
平铺文理+拉伸按钮图片
平铺文理+拉伸按钮图片
53 0
|
前端开发 Android开发
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
制作圆形图片,你会以下几种?
|
前端开发
基于canvas绘制边框环绕进度条
基于canvas绘制边框环绕进度条
195 0
基于canvas绘制边框环绕进度条
|
C# 小程序
给图片加上阴影效果
原文:给图片加上阴影效果 今天写一个小程序有一个给图片加上阴影的需求,记得WPF的Effect中就有阴影特效,就打算用它了。代码如下:     using (var imageStreamSource = File.
1181 0
|
前端开发 索引
使用canvas绘制渐变色矩形和使用按键控制人物移动
使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 image.png 相关代码: Title canvas { border: 1px solid #ccc; } /* .
1395 0