点击复制
- <!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>
13832413877
微信号已复制
我的微信
微信扫一扫