点击上方“web后端网页设计”关注，即可掌握更多Html div css HTML5+CSS3、JavaScript、JQuery、PHP、mysql、帝国CMS建站教程。
1.首先，大纲是一个非常强大的东西
温故知新，10年写了一篇关于可用性的文章：《关于页面可用性概要的一些研究》，蛮有用的； 3年后，也就是13年，我推出了一个没什么价值的东西：《纯CSS实现的轮廓切换过渡动画效果》。
一周前，微博上有人提出一个问题：
有没有办法用CSS，用一层标签来实现下面减号的效果，【不能用::before,::after伪元素来实现】【box-shadow效果不好，我试过了小尺寸IE会模糊Edge]，兼容IE9+浏览器。 我没有什么想法，但高手在民间！
大纲里的知识点很多，可以展开写一个小故事。 这里简单介绍一下。
1.近亲属
轮廓和边框是近亲，为什么这么说呢？ 首先，它们都是针对元素的外框； 其次，支持的属性值几乎是一样的，例如outline-style和border-style的值dotted、dashed、solid、...等等，而且有些句型也几乎一样。 如果这都不是近亲，那绝对定位和浮动有什么用呢？
2.IE8+支持
严格来说，outline是一个CSS3属性，但IE8+浏览器才支持。 顺便说明一下，IE9+浏览器的outline也支持invert，这是专门针对outline-color的。 因此，如果你的项目不关心IE6/IE7浏览器，你可以记住大纲，有时可能会有所帮助。
3、不占空间
默认盒子模型下，假设元素为100*100像素css3 内圆角，我们为元素设置border:10pxsolid，那么元素的实际规格至少为120*120像素，元素的偏转、布局和等等，你需要多思考。 然而，轮廓不同。 即使设置了outline:100pxsolid，元素抢占的尺寸仍然是100*100像素。 这种行为与 CSS3 属性（例如 Transform 和 Box-Shadow）非常相似。 虽然外表丰满，但实际占用的空间并没有什么影响。 因此，当我们实现一些交互治疗效果，比如悬停变化时，我们可以专注于治疗效果本身，而不受布局的影响，这是一个很棒的体验。
4.直角！ 圆角？
只是过去和未来之间的联系。2。 轮廓的直角和圆角
疗效有一个：
一排60*60像素的直角图片，选中的图片有一个2像素的边框，圆角突出显示。 浏览器兼容性要求，IE9+和其他现代浏览器。
一般来说，我们第一反应是使用border+border-radius。 不过有一个问题，就是这里的外部高亮边框的效果被扩大了。 要知道边框会降低元素的规格。 因此，为了达到完美的对齐效果，我们需要重新定位所选元素。 top、bottom、left、right的margin值需要改变。 丢了，想想就烦！
就像这些UI表现一样，轮廓是天生要做的。 于是，我们挥手：
outline: 2px solid #26C2A7;
突出显示的边框在哪里？ 这里这里这里！
但是，不是圆角！
各位朋友，不要试图通过border-radius来改变轮廓的圆角。 要知道轮廓和边框是近亲，都是穿开裆裤长大的。 但是，儿媳妇却不能分享！ border-radius和border是注册的亮眼情侣，你看，连姓氏都跟着王子了，人家只认border，你没办法勾勒，找自己的老婆解渴吧。
然而，轮廓实际上是一只没有婆婆的单身狗。 难道他的余生轮廓注定是直角的吗？
3、轮廓圆角疗效
在浩瀚的CSS海洋中，乍一看，似乎没有什么能让轮廓变得圆润的。 注意“好像”这两个字，如果我们耳朵尖的话，我们还是会发现隐藏在某个地方的东西，可以让轮廓变得圆润。
在FireFox浏览器中，有一个与outline匹配的圆角对outline-radius，
其关系与border和border-radius的关系相同。
由于它只是FireFox浏览器的私有属性，所以当前使用需要添加-moz-前缀，即-moz-outline-radius。
效果截图如下：
相关CSS代码如下：
img {
outline: 30px solid #cd0000;
-moz-outline-radius: 30px;
}
是不是很容易啊！ 如果你观察得足够仔细，你会发现outline-radius和border-radius还是有区别的？ 你看到区别了吗？ 正确答案有奖品……哈，对了，你们都答错了！ 没有区别，outline-radius 的舍入规则和语法与 border-radius 相同。
唯一的区别，就是兼容性问题，不是看到的，而是测试过的。 告诉你一个不幸的消息，目前除了FireFox浏览器支持outline-radius之外，其他浏览器都是空屁！
如果只是webkit/blink浏览器支持的话还好说，至少移动端还可以用，而且也只有FireFox支持，打羊毛！ 不，你甚至不必玩羊毛！
亲爱的，别绝望，车到山前必定有一条路，这条路就进去了……
4. Box-shadow模拟轮廓的圆角效果
Outline-radius其实没什么用，但是我们可以使用其他属性来实现类似的效果，例如图形创作大师之一的box-shadow。
我们平时使用box-shadow大部分都是以上3个参数css3 内圆角，水平/垂直倾斜和模糊大小，有的朋友可能不知道第四个可选参数值有什么用？ box-shadow的第四个参数的值，在名字之外展开，可以扩大投影范围。 当然，扩展后的区域是纯色区域。 我们可以利用这个特性来模拟轮廓纯色边框的效果，并且不影响元素的抢占规范！
先上例子，大家可以硬点这里：CSS3 box-shadow模拟轮廓半径圆角Demo
CSS代码如下：
img {
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
经常使用CSS3的朋友应该知道，box-shadow的投影形状和border-radius是一脉相承的，即border-radius是圆角的，box-shadow的投影也是圆弧形的。 那么，我们这里最终的疗效如下图所示：
下面简单解释一下接下来两行CSS代码的含义：
border-radius: 1px 表示圆角大小为1像素。 有的朋友可能会奇怪，为什么是1像素呢？ 截图的圆角明显有几十个像素，下面只是解释一下；
box-shadow: 0 0 0 30px #cd0000 有4个值，分别是水平倾斜0、垂直倾斜0、模糊0（纯色）、扩展大小30像素。 我们可以想象，光线是直接从袋子的顶部射来的，因为没有偏转，也没有模糊，所以我们看不到任何阴影。 事实上，盒子的阴影正好是袋子的大小（带有 1 像素的圆角）。 此时扩展了30个像素。 我们可以想象，具有 1 像素圆角的阴影被扩展了 30 像素。 哟，这不是我们需要的疗效吗，不是截图所示的疗效吗！
知道border-radius1像素左右，扩大30像素后，圆角大小就是30像素。
不过，虽然肉眼看不出来，但上面的方法其实是有缺陷的，因为图片并不是正宗的直角，而是有一个1像素的圆角。 如果想要达到内方外圆的完美效果，可以设置一层标签，外层标签使用border-radius和box-shadow。
