CSS常用知识碎片（四）

CSS Shapes布局

<style>/* 关键字属性值 */shape-outside: none;shape-outside: margin-box;shape-outside: padding-box;shape-outside: border-box;shape-outside: content-box;/* 函数值 */shape-outside: circle();shape-outside: ellipse();shape-outside: inset(10px 10px 10px 10px);shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);/* 值 */shape-outside: url(image.png);/* 渐变值 */shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);</style>
  • shape-margin属性:控制文字环绕图形时文字与元素边界的距离。
<style>/* 长度值 */shape-margin: 10px;shape-margin: 20mm;/* 百分比值 */shape-margin: 60%;</style>
  • 使用CSS Shapes布局实现圆形内排版效果示意
<body><p class="circle"><before></before><after></after>在CSS Shapes布局问世之前，让网页中的文字像杂志一样有任意样式的排版是很难的，过去一直都是用网格、盒子和直线构造排版样式。CSS Shapes布局允许我们定义文本环绕的几何形状，这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是多彩的渐变图形。</p></body><style>.circle {border-radius: 50%;width: 207px; height: 240px;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);}after {float: right;width: 50%; height: 100%;shape-outside: radial-gradient(farthest-side ellipse at left, transparent 100%, red);}</style>