在圆形容器中显示文本的写法
<!DOCTYPE html> <html> <head> <title>CSS把文字限制在圆形内</title> <meta charset="utf-8"> <style type="text/css"> .circle { border-radius: 50%; width: 150px; height: 150px; color: white; background-color: deepskyblue; text-shadow: 1px 1px rgba(0,0,0,.5); padding: 10px; text-align: justify; } before { float: left; width: 50%; height: 100%; shape-outside: radial-gradient(farthest-side ellipse at right, transparent 100%, red); /* background: radial-gradient(farthest-side ellipse at right, transparent 100%, red); */ } after { float: right; width: 50%; height: 100%; shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red); /* background: radial-gradient(farthest-side ellipse at left, transparent 100%, red); */ } </style> </head> <body> <p class="circle"> <before></before><after></after> 在CSS Shapes布局问世之前,文字像杂志一样的任意形状的排版几乎是不可能的。 </p> </body> </html>
shape-outside不兼容IE浏览器,使用时需测试各浏览器的兼容问题
shape-outside倒数第二个参数实际应为100%,但是移动端设备100%右侧中间会出现换行,故写了98%,如显示有问题,可适当调整该值
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
![weinxin](https://zmingcx.com/wp-content/uploads/2019/08/wx.png)
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!