点击上方“Web后端网页设计”关注，更多HtmldivcssHTML5+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、...等等，而且有些句型也差不多相同的。 如果这些都不是近亲css 内圆角，那绝对定位和浮动还能说什么。
2.IE8+支持
严格来说，outline是一个CSS3属性，IE8以上浏览器都支持。 作为一个附加组件，IE9+浏览器的outline还支持invert，这是专门针对outline-color的。 因此，如果你的项目不关心IE6/IE7浏览器，你可以记住大纲，有时可能会有所帮助。
3.不占空间
默认盒模型下css 内圆角，假设元素为100*100像素，我们为元素设置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来表示上述三个参数，即水平/垂直倾斜和模糊大小。 有的男伙伴可能不知道第四个可选参数值是做什么用的？ box-shadow的第四个参数值，在名字之外展开，可以扩大投影范围。 事实上，扩展的区域是一个纯色区域。 我们可以利用这个特性来模拟轮廓纯色边框的效果，并且不影响元素的抢占规范！
先上例子，大家可以硬点这里：CSS3box-shadow模拟outlineradius圆角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:00030px#cd0000 有4个值，分别是水平倾斜0、垂直倾斜0、模糊0（黑色），扩展大小为30像素。 我们可以想象，光线直接从袋子的顶部射来，由于没有偏转，也没有模糊，所以我们看不到任何阴影。 事实上，包的阴影正是包的大小（带有1像素的圆角）。 此时扩大了30个像素。 我们可以想象，1像素圆角的阴影扩大了30像素。 哟，这不是我们需要的疗效吗，不是截图所示的疗效吗！
你知道 border-radius1 像素大约是 1 像素吗？ 扩大 30 像素后，圆角大小将为 30 像素。
不过，虽然肉眼看不到，但实际上它内部的方式是有缺陷的，因为图片不是真正的直角，有1个像素的圆角。 如果想要达到内方外圆的完美效果，可以设置一层标签，外层标签使用border-radius和box-shadow。
发表评论