利用CSS3实现圆角的outline效果的教程
一、首先，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像素，元素的偏移、布局啊什么的，就需要多多思考。但是，o
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像素，元素的偏移、布局啊什么的，就需要多多思考。但是，o
utline不一样，你哪怕outline:100px solid，元素占领的尺寸还是100*100像素。这种行为表现，与transform以及box-shadow等CSS3属性很类似，虽然形状丰满了，但是，占领的真切空间没有影响。于是，我们在实现一些交互效果的时候，例如hover变幻，我们就可以专注于效果本身，而不用被布局所左右，是很棒的体验。
4. 直角！圆角？
正巧承上启下一下。
二、outline的直角与圆角
现有此效果一枚：
一排60*60像素的直角，选中的外框2像素带圆角高亮。扫瞄器兼容要求，IE9+以及其他现代扫瞄器。
4. 直角！圆角？
正巧承上启下一下。
二、outline的直角与圆角
现有此效果一枚：
一排60*60像素的直角，选中的外框2像素带圆角高亮。扫瞄器兼容要求，IE9+以及其他现代扫瞄器。
普通而言，我们的第一反应是用法border + border-radius。但是，有个问题，就是，这里的外部高亮边框效果是外扩的，要知道，border是会增强元素的尺寸的，于是，为了我们的完善对齐效果，还需要对选中元素做重定位，上下左右的margin值都需要转变。我丢，想想就烦！
像这种UI表现，天生就是outline干的事情。于是，我们大手一挥：
CSS Code复制内容到剪贴板
outline: 2px solid 26C2A7;
像这种UI表现，天生就是outline干的事情。于是，我们大手一挥：
CSS Code复制内容到剪贴板
outline: 2px solid 26C2A7;
高亮的边框在哪里？在这里在这里！borderbox
但是，不是圆角啊！
友爱的伴侣，千万不要妄图通过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-前缀，也就是-moz-outline-radius.
著名不如见面，若是火狐，您可以狠狠地点击这里：FireFox下outline radius圆角效果Demo
效果如下截图：
在FireFox扫瞄器中，就有和outline匹对的圆角夫妻outline-radius,
其关系，就和border和border-radius的关系一样。
因为目前还只是FireFox扫瞄器私有的属性，因此，目前的用法需要加-moz-前缀，也就是-moz-outline-radius.
著名不如见面，若是火狐，您可以狠狠地点击这里：FireFox下outline radius圆角效果Demo
效果如下截图：
相关CSS代码如下：
CSS Code复制内容到剪贴板
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.
唯一的区分，也就是兼容性问题，不是看出来的，是试出来的。告知大家一个不幸的消息，目前，除了FireFox扫瞄器支持outline-radius，其他扫瞄器都是空大屁！
假如是仅webkit/blink扫瞄器支持还好说，起码移动端还可以用用，搞了个仅仅FireFox支持，玩毛线啊！不对，连毛线都没得玩！
亲，不要无望啊，车到山前必有路，此路进去
四、box-shadow模拟outline的圆角效果
outline-radius虽然没戏了，但是，我们可以用法其他属性，可以实现类似的效果，比喻说，图形构建大神之一的box-shadow.
我们平常用法box-shadow最多的是前面3个参数，水平/垂直偏移以及含糊大小，可能有一些小伙伴并不清晰其第4个可选参数值毕竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，固然，扩大的区域是实区域。我们就可以利用这一特性，模拟实现不影响元素占领尺寸的outline实边框效果啦！
实例先行，您可以狠狠地点击这里：CSS3 box-shadow模拟outline radius圆角Demo
CSS代码如下：
CSS Code复制内容到剪贴板
img {
border-radius: 1px;
实例先行，您可以狠狠地点击这里：CSS3 box-shadow模拟outline radius圆角Demo
CSS代码如下：
CSS Code复制内容到剪贴板
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像素啊，截图圆角明明好几十像素，下面正巧就说明了；
}
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-radius 1像素的左右了吧，扩展30像素后，圆角就是30像素大小了。
然而，虽然肉眼看不出来，上面的办法实际有瑕疵，由于不是纯正的直角，有1像素的圆角。假如你想实现完善的内方外圆的效果，可以套一层标签，外面的标签用法border-radius和box-shadow就可以了。
知道border-radius 1像素的左右了吧，扩展30像素后，圆角就是30像素大小了。
然而，虽然肉眼看不出来，上面的办法实际有瑕疵，由于不是纯正的直角，有1像素的圆角。假如你想实现完善的内方外圆的效果，可以套一层标签，外面的标签用法border-radius和box-shadow就可以了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论