supce's blog

CSS Secret读书笔记之灵活定位&边框内圆角

发表于  |    |  

灵活的背景定位

假设一种场景，需要对容器某个角对背景图片做偏移定位，比如说右下角。在定位的同时，也希望图片和容易边角之间能够够留出一定的空隙，以避免下图这种效果：

当容器的尺寸固定时，很好解决。但是容器的尺寸不固定时，可以利用下面三种方法来解决。

background-position的扩展语法方案

在CSS3中，background-position已经得到扩展，它允许我们指定背景图片距离任意角的偏移量。

当然，还需要一个合适的回退方案。避免浏览器的不支持。

代码：

<div class="position">
    Code Pirate
</div>
.position{
    max-width: 10em;
    min-height: 5em;
    margin: 20px auto;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
    background:url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;   /*回退方案*/
}
.position{
    background-position: right 10% bottom 20%;
}

效果如下：

background-origin方案

在上个方案中有一个缺陷，当修改容器的内边距时，需要在3处做出修改。希望有一种方式，能够让背景图片自动根据设定的内边距定位，而不用声明额外的偏移量。
在默认情况下background-position是以padding box为基准的。可以利用属性background-origin来改变这种行为。当把它的值设置为content-box时，background-position会以内容区边缘作为基准。此时，背景图片的距离的边角偏移量就可以和内边距保持一致了。
代码：

<div class="origin">
    Code Pirate
</div>
.origin{
    max-width: 10em;
    min-height: 5em;
    margin: 20px auto;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
    background:url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a;
}
.origin{
    background-origin: content-box;
 }

效果如下：

calc()方案

如果想把背景图片定位到距离底边10px 距离右边20px。可以使用calc()
即：background-position: calc(100% - 20px) calc(100% - 10px);也可以达到同样的效果。

注意：在calc()函数内部的- + 运算符两侧需要加一个空格符，否则会产生解析错误。

边框内圆角

考虑一种场景，需要一个容器，只在内侧有圆角，而border或者outline仍然是直角，可以用下面两种方式实现。

嵌套容器

这个方式很简单，直接在原容器外侧嵌套一个容器，设置内部容器有圆角即可
代码：

<div class="radius">
    <div>
        this is a test
    </div>
</div>
.radius{
    max-width: 10em;
    min-height: 5em;
    margin: 20px auto;
    padding: .8em;
    background: #655;
}
.radius > div{
    min-height: 3.4em;
    background: tan;
    border-radius: .8em;
    padding: 1em;
}

效果如下：

box-shadow填充

有时候，可能稍微有些强迫症，不想破坏原有的HTML结构。可以使用box-shadow进行颜色填充。
之前已经知道，outline并不会沿着元素的圆角走。可以在元素外侧设置outline
代码如下：

<div class="shadow_outline">
    this is a test
</div>
.shadow_outline{
        max-width: 10em;
        min-height: 5em;
        margin: 20px auto;
        padding: .8em;
        background: tan;
        border-radius: .8em;
        outline: .6em solid #655;
    }

此时的效果如下：

会发现在四个角会有空白，这个空白可以利用box-shadow进行颜色填充。由几何数学可知，当圆角的半径为r时，box-shadow的投影扩张值不能小于(√2-1)r。上面的border-radius为0.8，计算得约为0.33，
因此只要设置box-shadow: 0 0 0 .34em #655;即可。
效果如下：

最后说句题外话，Chrome v53.0.2785.113m版本的界面挺好看，没错，我就是扁平脑残粉。