css多重边框

最新推荐文章于 2022-11-05 21:49:31 发布

原创最新推荐文章于 2022-11-05 21:49:31 发布 · 321 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

html+css3 专栏收录该内容

20 篇文章

订阅专栏

一.box-shadow方案:

了解box-shadow值得含义：

box-shadow:length length length color

其中前三个length分别指阴影离开文字的横向方向距离，阴影离开文字的纵向距离和阴影的模糊半径，color指阴影的颜色

注意：box-shado还接受第四个参数box-shadow:length length length length color

第四个length称为半径扩张通过指定正值或负值，可以让投影面积增大或者减少

实现原理：

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多重边框</title>
    <style>
div{
    margin:50px  auto auto auto;
width: 100px;
height: 100px;
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655;
}
    </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

实现效果：

box的好处在于，它支持逗号分割语法，我们可以创建任意数量的投影。因此我们可以在上面的例子上在加一个deeppink颜色的“边框”

代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多重边框</title>
    <style>
div{
    margin:50px  auto auto auto;
width: 100px;
height: 100px;
background-color: yellowgreen;
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink;
}
    </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

实现效果：

唯一要注意的是box-shadow是层层叠加的，第一层投影位于最顶层，所以我们想在嘴外层加一道边框为5px的外框，那就需要指定扩张半径的值为15培训（10px+5px）而且还可以给这些“边框”加一层常规的投影：

box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6);

实现效果

outline方案：

在某些情况下，你可能需要两层边框，那就可以设置一层常规边框，在加上outline(描边)属性来产生外层的边框，优点是灵活。

效果实例

代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多重边框</title>
    <style>
div{
    margin:50px  auto auto auto;
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
}
    </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

描边的另一个好处在于还可以用 outline-offset属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。还可以产生缝边效果！

效果展示：

代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多重边框</title>
    <style>
div{
    margin:50px  auto auto auto;
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 10px solid #655;
outline: 2px dashed white;
outline-offset: -5px;
}
    </style>
</head>
<body>
  <div>
  </div>
</body>
</html>