outline和outline-offset属性实现简单的缝边效果

  如果现在有个需求,让你实现下面的样式,你会怎么做呢?

  outline和outline-offset属性实现简单的缝边效果

  我首先想到的是用 border + box-shadow 实现,代码如下

                div {
margin: 50px auto;
width: 200px;
height: 100px;
background: #655;
border-radius: 5px;
border: 1px dashed #fff;
box-shadow: 0 0 0 10px #655;
}

    当时,我个人认为没有其它方法可以实现了,直到后面在《css揭秘》一书当中看到了另外的方法,顿时豁然开朗

   这个方法是用 css的 outline + outline-offset 属性来实现的

   下面,我用自己的理解来说说这个2属性是什么,因为官方的解释对不熟悉这2个属性的人来说会有点懵

  简单来说,outline属性等同于border,都可以绘制边框,可以看作是一条始终包裹在border外的边框,如下图

outline和outline-offset属性实现简单的缝边效果

  如上图,棕色是border,桃红色是 outline,只要border和outline属性同时作用于同一个元素,outline绘制的边框始终会在border外面

    另外,如果你想给一个元素增加一条边框,使用 outline 或 border 都可以

outline和outline-offset属性实现简单的缝边效果

   

  在来说说outline-offset属性,可以简单理解为控制outline绘制的边框和border边框之间的距离,如下图

  outline和outline-offset属性实现简单的缝边效果

  另外,outline-offset属性还可接收负值,正是这个特性,让我们能够实现缝边的效果,代码如下

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 100px;
background: #655;
border-radius: 5px;
outline: 1px dashed #fff;
outline-offset: -15px;
}
</style>
</head> <body>
<div></div>
</body> </html>

  

  

  

上一篇:centos php扩展开发流程


下一篇:Linux 添加挂载硬盘(包含挂载大于2T以上硬盘)