CSS如何实现圆⾓的outline效果？
⼀、⾸先，outline是个很⽜逼的东西
温故⽽知鑫，10年的时候写过⼀篇可⽤性⽅⾯的⽂章：“”，还算挺有⽤的；3年之后，也就是13年，介绍了个没什么使⽤价值的东
西：“”。
个把星期前，微博上抛出了个问题：
有没有什么⽅法利⽤CSS以及使⽤⼀层标签实现下⾯这个加号效果，【不能使⽤::before, ::after伪元素实现】【box-shadow效果不好，我试过了，⼩尺⼨IE会糊边】，兼容IE9+浏览器。我没什么思路，但⾼⼿在民间！
果然⾼⼿在民间，结果巧妙使⽤outline实现了Chrome浏览器下的⼗字效果。。
—————–我是低调的分隔线，⼤家都看不到我—————
outline知识点很多的，扩展开来可以写个长篇了，这⾥简单介绍点东西。
1. border近亲
outline和border是近亲，为什么这么讲呢？⾸先，都是给元素外⾯套框框的；其次，⽀持的属性值⼏乎都是⼀样的，例如，outline-
style和border-style值dotted, dashed, solid, ...之类的，⼀些语法也⼏乎⼀样。如果这都不算近亲，你让绝对定位和浮动何⾔以对。
2. IE8+⽀持
outline严格来讲属于CSS3属性，但是IE8+浏览器就⽀持了。外挂⼀句，IE9+浏览器的outline还⽀持invert，专门针对outline-color. 所以，如果你的项⽬不⽤管IE6/IE7浏览器，可以把outline挂在⼼中，有时候说不定会帮忙。
3. 不占据空间
默认的盒模型下，假设元素100*100像素，我们给元素设置border:10px solid，则实际该元素占据的尺⼨⾄少就是120*120像素，元素的偏移、布局啊什么的，就需要多多思量。但是，outline不⼀样，你哪
怕outline:100px solid，元素占据的尺⼨还是100*100像素。这种⾏为表现，与transform以及box-shadow等CSS3属性很类似，虽然外形丰满了，但是，占据的真实空间没有影响。于是，我们在实现⼀些交互效果的时候，例如hover变化，我们就可以专注于效果本⾝，⽽不⽤被布局所左右，是很棒的体验。
4. 直⾓！圆⾓？
正好承上启下⼀下。
⼆、outline的直⾓与圆⾓
现有此效果⼀枚：
⼀排60*60像素的直⾓图⽚，选中的图⽚外框2像素带圆⾓⾼亮。浏览器兼容要求，IE9+以及其他现代浏览器。
⼀般⽽⾔，我们的第⼀反应是使⽤border + border-radius。但是，有个问题，就是，这⾥的外部⾼亮边框效果是外扩的，要知道，border 是会增加元素的尺⼨的，于是，为了我们的完美对齐效果，还需要对选中元素做重定位，上下左右的margin值都需要改变。我丢，想想就烦！
像这种UI表现，天⽣就是outline⼲的事情。于是，我们⼤⼿⼀挥：
outline: 2px solid #26C2A7;
⾼亮的边框在哪⾥？在这⾥在这⾥！
但是，不是圆⾓啊！
亲爱的朋友，千万不要妄图通过border-radius来改变outline的圆⾓，要知道，outline跟border是近亲，穿⼀个开裆裤长⼤的。但是，媳妇可不能共享哈！border-radius和border是登记在案的光明夫妻，
看，连姓⽒都随了夫君了，⼈家只认border, 你outline没戏，⾃⼰的媳妇⽌渴去。
但是，outline貌似是个单⾝狗，没有媳妇啊，难道outline注定⼀辈⼦直⾓，掰不弯了？
三、outline的圆⾓效果
茫茫CSS海，乍⼀看去，貌似没有能让outline圆⾓的东西。注意措辞，“貌似”，我们如果有双犀利的眼睛，还是会发现某处藏可以让outline圆⾓的东西。
在FireFox浏览器中，就有和outline匹对的圆⾓夫妻outline-radius,
其关系，就和border和border-radius的关系⼀样。
由于⽬前还只是FireFox浏览器私有的属性，因此，⽬前的使⽤需要加-moz-前缀，也就是.
闻名不如见⾯，若是⽕狐，您可以狠狠地点击这⾥：
效果如下截图：
相关CSS代码如下：
img {
outline: 30px solid #cd0000;
-moz-outline-radius: 30px;
}
是不是很松松啊！如果你观察⾜够仔细，会发现，outline-radius和border-radius还是有区别的？看出来没，区别在哪⾥？答对有奖……哈，没错，你们都答错了！没有任何区别，outline-radius的圆⾓规则、语法之类跟border-radius就是⼀样的。
唯⼀的区别，也就是兼容性问题，不是看出来的，是试出来的。告诉⼤家⼀个不幸的消息，⽬前，除了FireFox浏览器⽀持outline-radius，其他浏览器都是空⼤屁！
如果是仅webkit/blink浏览器⽀持还好说，⾄少移动端还可以⽤⽤，搞了个仅仅FireFox⽀持，玩⽑线啊！不对，连⽑线都没得玩！
亲，不要绝望啊，车到⼭前必有路，此路进去……
四、box-shadow模拟outline的圆⾓效果
outline-radius虽然没戏了，但是，我们可以使⽤其他属性，可以实现类似的效果，⽐⽅说，图形构建⼤神之⼀的box-shadow.
我们平时使⽤box-shadow最多的是前⾯3个参数，⽔平/垂直偏移以及模糊⼤⼩，可能有⼀些⼩伙伴并不清楚其第4个可选参数值究竟有何⽤？box-shadow第4个参数值，名外扩展，可以把投影范围扩⼤，当然，扩⼤的区域是实⾊区域。我们就可以利⽤这⼀特性，模拟实现不影响元素占据尺⼨的outline实
⾊边框效果啦！
实例先⾏，您可以狠狠地点击这⾥：
CSS代码如下：
img {
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
CSS3⽤的多的⼩伙伴应该知道，box-shadow的投影形状与border-radius⼀脉相承，也就是border-radius是圆⾓的，box-shadow的投影也是圆弧形的。于是，我们这⾥最终的效果就如下图所⽰：
下⾯简单解释下两⾏CSS代码的含义：
1. border-radius: 1px表⽰圆⾓⼤⼩1像素。有同学可能奇怪了，怎么是1像素啊，截图圆⾓明明好⼏⼗像素，下⾯正好就解释了；
borderbox2. box-shadow: 0 0 0 30px #cd0000出现了4个数值，分别是⽔平偏移0, 垂直偏移0，模糊0(纯⾊), 扩展⼤⼩30像素。我们可以想象成，
光线直接从盒⼦的正上⽅照下来，因为没有偏移没有模糊，我们看不到任何阴影。实际上，盒⼦的阴影正好就是盒⼦的⼤⼩（外带1像素圆⾓），此时，扩展30像素，我们可以脑补⼀下，1像素圆⾓的阴影再扩展30像素。哟，不就是我们需要的效果嘛，不就是截图展⽰的效果嘛！
知道border-radius 1像素的左右了吧，扩展30像素后，圆⾓就是30像素⼤⼩了。
然⽽，虽然⾁眼看不出来，上⾯的⽅法实际有瑕疵，因为图⽚不是纯正的直⾓，有1像素的圆⾓。如果你想实现完美的内⽅外圆的效果，可以套⼀层标签，外⾯的标签使⽤border-radius和box-shadow就可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。