【前端技巧】CSS常用知识碎片（四）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端技巧】CSS常用知识碎片（四）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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);
/* <url>值 */
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>