CSS-轮廓

重要！前言必读！

本章节主要学习的是css的轮廓，css轮廓（outline）以及轮廓宽度（outline-width）、轮廓样式（outline-style）、轮廓颜色（outline-color）。

轮廓宽度：outline-width

注意！outline-width是一种用于绘制元素轮廓宽度的属性，设置轮廓宽度必须设置轮廓的样式，不然看不到效果。要注意轮廓和边框对比，轮廓略微比边框还在外，也就是说同时定义边框和轮廓效果你是看不出来的，肉眼上看是重叠的，但实际轮廓略微比边框还在外，这时候需使用轮廓的偏移（outline-offset）属性来使元素的轮廓与边框之间添加空间，来查看轮廓和边框的区别。

代码图

效果图

---

轮廓样式：outline-style

注意！outline-style是用于设置元素的轮廓样式，轮廓样式的样式有：实线(solid)、虚线(dashed)、dotted(点线)、double(双线)、(groove(3D坡口)、3D 脊线边框(ridge)、3D inset(inset)、3D outset(outset)、无边框(none)、隐藏边框(hidden)，其中3D类的边框样式效果是取决于轮廓颜色（outline-color）的值决定的。

轮廓样式

• solid（实线）
• dashed（虚线）
• dotted（点线）
• double（双线）
• groove（3D 坡口）
• ridge（3D 脊线）
• inset（3D inset）
• outset（3D outset）
• none（无轮廓）
• hidden（隐藏轮廓）

所有的轮廓样式的样式效果图

代码图

效果图

---

轮廓颜色：outline-color

注意！outline-color是用于设置元素的轮廓颜色，轮廓颜色的值有:颜色名、十六进制值、RGB值、RGBA值、HSL值、HSLA值，颜色值固然众多，只需要记住常用的即可，最常用的是颜色名和十六进制值以及RGB值。

代码图

效果图

注意！

单独的轮廓宽度的边、轮廓宽度的值、单独的轮廓样式的边、轮廓样式的值、单独的轮廓颜色的边、轮廓颜色的值，省略不写了。和边框同理，不懂请跳转下面链接查看。

CSS-边框-CSDN博客文章浏览阅读809次，点赞20次，收藏17次。重要！前言必读！https://blog.csdn.net/m0_73839298/article/details/134783491?spm=1001.2014.3001.5501