灵活的椭圆形.pdf

灵活的椭圆形 原⽂出处：http://www ./css3/css-secrets/flexible-ellipses.html 问题 你可能注意过，在很多时候任何⽅形元素都可以直接应⽤⼀个 常⼤的border- radius来变成圆形，⽤类似下⾯这样的CSS代码： background: #fb3; width: 200px; height: 200px; border-radius: 100px; /* 边⻓的⼀半 */ 图注:⼤⼩固定，border-radius的值为边长⼀半，对应⽣成的圆 你也可以指定⼤于100px的border-radius，这同样会⽣成⼀个圆。原因请阅读规 范： 当任何两个相邻边框半径之和超过了边框盒的尺⼨，客户端必须按⽐例 减⼩所有边框半径的值，直到它们相互之间没有重叠。 — CSS Backgrounds Borders Level 3 但是，我们的元素并不能总是指定固定的宽度和⾼度，因为我们希望它能够根据⾃⼰ 的内容⾃适应，⽽最后的元素⼤⼩是⽆法预知的。即使我们正在设计⼀个静态⽹站， ⽽且它的内容是预先确定的，某个时候我们可能也想要进⾏修改；或者它可能会根据 不同的度量显⽰成降级的字体。在这种情况下，如果它的宽度和⾼度不完全相等，我 们通常希望它变成⼀个椭圆；如果相等，则为圆。但是，我们前⾯的代码却不是这样 的。当宽度⼤于⾼度时，它的结果下图所⽰。 图注：前⾯的⽰例，当宽度⼤于⾼度时的情况；border-radius的圆在这⾥⽤虚线 绘出 我们可以⽤border-radius做⼀个椭圆，⽽且是灵活的椭圆吗？ 解决⽅案 ⼀个鲜为⼈知的内容是：border-radius接受⽔平和垂直⽅向不同值，使⽤斜杠(/) 来分隔它们。这可以让我们在圆⾓处取整来创建椭圆。 图注：⽔平和垂直⽅向border-radius值不同的盒⼦；现在我们的圆⾓曲线变成了 那个我们指定的border-radius值的椭圆，这⾥⽤虚线表⽰ 所以，如果我们有⼀个200px × 150px尺⼨的元素，我们可以把它变成⼀个⽔平和 垂直半径分别对应为其宽度和⾼度值⼀半的椭圆： border-radius: 100px / 75px; 你看到结果如下图所⽰： 图注：应⽤不同的border-radius曲线创建的椭圆 但是，这有⼀个 常⼤的缺陷：如果元素尺⼨发⽣变化，border-radius的值也必 须相应改变。你可以下图中看到border-radius的结果，如果我们把上边的半径应 ⽤给⼀个200px × 300px的元素。如果我们的元素尺⼨依赖于内容，问题就出现 了。 图注：尺⼨变化会破坏我们的椭圆；但是好的⼀点是，这种形状在⼀些圆柱中 常好 ⽤ ！ border-radius的另⼀个鲜为⼈知的特性是它还接受百分⽐值，不只是长度值。百 分⽐可以解析为相应的尺⼨，⽔平半径的宽度和垂直半径的⾼度。这意味着相同的百 分⽐可以计算出不同的⽔平半径和垂直半径。因此，为了创建灵活椭圆，我们可以给 半径应⽤50%： border-radius: 50% / 50% ; 因为斜杠前后的值是⼀样的 （尽管它们计算出的是不同的值），我们可以把它进⼀步 简化为： border-radius: 50% ; 结果就是只⽤⼀⾏CSS就可以创建出灵活的椭圆，不必考虑元素的宽度和⾼度。 为什么要使⽤border-radius？ 很多⼈好奇border-radius为什么叫这个名字，因为它的使⽤不涉及到边框。叫 corner-radius还更合适⼀些。这样叫的原因是border-radius包裹了元素的边 框盒的边缘。如果元素没有边框的话，就没有任何区别了，但是如果有边框，它就是 边框的外圆⾓。内圆⾓的近似值较⼩ （max(0, border-radius - border- width)⽐较精确）。 半椭圆 现在我们已经知道如何⽤CSS创建⼀个灵活的椭圆，⾃然⽽然我们就会想到我们是否 可以创建其它常见的形状，⽐如椭圆的⼀部分。我们可以花点时间来看看如何创建⼀ 个半椭圆。 图注：⼀个半椭圆 ⼀个半椭圆在宽度等于⾼度两倍的时候，可以变成⼀个半圆 （或当⾼度 是宽度的两倍，椭圆沿着横轴剪断）。 它是相对于纵轴对称的，但不相对于横轴对称。即使我们还⽆法知道确切的border- radius的值 （它可以是所有可能的值），对于每个⾓我们需要不同的半径值这点是 很明确的。但是，我们⽬前尝试过的是四个⾓都⽤同⼀