21、轮廓 outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS 轮廓属性

  • outline 在一个声明中设置所有的轮廓属性。
  • outline-color 设置轮廓的颜色。
  • outline-style 设置轮廓的样式。
  • outline-width 设置轮廓的宽度。

例：outline:#f00 solid 5px;

<html>
<head>
<meta charset = "utf-8">
<title>CSS</title>
<style>
  #bar {
    margin: 40px;
    padding: 50px;
    border: 20px solid #069;
    outline:#f00 solid 5px;
  }
</style>
</head>
<body>
  <div id="bar">
    CSS轮廓
  </div>
</body>
</html>

可知图中盒子文本是“CSS轮廓”，盒子的边框宽度20px，颜色是蓝色的；那么蓝色外面一层描边就是轮廓，轮廓宽度为5px，颜色为红色。两个样式都是实线的：
![图片说明](https://uploadfiles.nowcoder.com/images/20200603/171901592_1591170293338_A384D2D6538347DFA01C2284687DEAF4 "图片标题")

22、CSS3 边框阴影

box-shadow: 阴影向右偏移量，阴影向下偏移量，阴影模糊值，阴影颜***ox-shadow: 5px 5px 5px #666;

例：

<html>
<head>
<title>CSS</title>
<style>
  body { background: rgb(246, 255, 194); }
img {
  width:500px;
  box-shadow: 7px 7px 10px black;
}
</style>
</head>
<body>
<div id="foo">
 <img src="images/2.png">
</div>
</body>
</html>

背景颜色为淡黄色，盒子内装的是一张图片，可以在css中看到“ box-shadow: 7px 7px 10px black;”向右偏移7px，向下偏移7px，模糊值为10px，阴影为黑色：

![ ](https://uploadfiles.nowcoder.com/images/20200603/171901592_1591170308263_D644DF7FEAE52F1A1E4AA53AA9D0CA51 "图片标题")

多重阴影

可以定义多个阴影叠加在一起。
例：

img {  box-shadow: 0px 0px 30px red inset, 8px 8px 10px #333; }
<img id="1" src="image/chrome.png">

我用的是一张透明背景的图片“雅”，盒子里装的是这张图片，盒子外阴影是黑色，向右偏移8px，向下偏移8px，阴影模糊值为10px；盒子内阴影是红色，不偏移，模糊值为30px：
![ ](https://uploadfiles.nowcoder.com/images/20200603/171901592_1591170322428_A375C1CE8783793A2748D5F7CDB88B6F "图片标题")

23、CSS3 圆角边框

一个Box有4个角，分别用 border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-top-left-radius 来定义。
每个角由2个值来定义一个椭圆。
也可以用 border-radius 一起定义4个圆角。格式为：
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下

如果省略了左下，那么就等同于右上；如果省略了右下，那么就等同于左上；如果也省略了右上，那么也等同于左上。

例：

<html>
<head>
<title>CSS</title>
<style>
img {
  box-shadow: 7px 7px 10px black;
  border-radius: 30px / 20px;
}
</style>
</head>
<body>
<div id="foo">
  <img id="2" src="image/2.jpg">
</div>
</body>
</html>

![ ](https://uploadfiles.nowcoder.com/images/20200603/171901592_1591170338464_5D2BD33465971CCD9602E5E23AD08322 "图片标题")

24、CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框
border-image 属性的值有：

  • border-image-source 用在边框的图片的路径。
  • border-image-slice 图片边框向内偏移。
  • border-image-width 图片边框的宽度。
  • border-image-outset 边框图像区域超出边框的量。
  • *border-image-repeat *图像边框是否应平铺(repeated)、铺满(rounded)或拉伸

(stretched)。

例：

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
  border: 15px solid transparent;
  width: 300px;
  padding:20px;
}
#round {
  border-image:url(images/border.png) 26 26 round;
}
#stretch {
  border-image:url(images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
  <div id="round">在这里，图片铺满整个边框。</div>
  <br>
  <div id="stretch">在这里，图片被拉伸以填充该区域。</div>
</body>
</html>