利用CSS3实现圆角的outline效果的教程


Posted in HTML / CSS onJune 05, 2015

一、首先,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的直角与圆角

现有此效果一枚:
利用CSS3实现圆角的outline效果的教程

一排60*60像素的直角图片,选中的图片外框2像素带圆角高亮。浏览器兼容要求,IE9+以及其他现代浏览器。

一般而言,我们的第一反应是使用border + border-radius。但是,有个问题,就是,这里的外部高亮边框效果是外扩的,要知道,border是会增加元素的尺寸的,于是,为了我们的完美对齐效果,还需要对选中元素做重定位,上下左右的margin值都需要改变。我丢,想想就烦!

像这种UI表现,天生就是outline干的事情。于是,我们大手一挥:

CSS Code复制内容到剪贴板
  1. outline2px solid #26C2A7;   

利用CSS3实现圆角的outline效果的教程

高亮的边框在哪里?在这里在这里!
利用CSS3实现圆角的outline效果的教程

但是,不是圆角啊!

亲爱的朋友,千万不要妄图通过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

效果如下截图:
利用CSS3实现圆角的outline效果的教程

相关CSS代码如下:

CSS Code复制内容到剪贴板
  1. img {   
  2.     outline30px solid #cd0000;    
  3.     -moz-outline-radius: 30px;   
  4. }  

是不是很松松啊!如果你观察足够仔细,会发现,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实色边框效果啦!

实例先行,您可以狠狠地点击这里:CSS3 box-shadow模拟outline radius圆角Demo

CSS代码如下:

CSS Code复制内容到剪贴板
  1. img {   
  2.     border-radius: 1px;   
  3.     box-shadow: 0 0 0 30px #cd0000;   
  4. }  

CSS3用的多的小伙伴应该知道,box-shadow的投影形状与border-radius一脉相承,也就是border-radius是圆角的,box-shadow的投影也是圆弧形的。于是,我们这里最终的效果就如下图所示:
利用CSS3实现圆角的outline效果的教程

下面简单解释下两行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就可以了。

HTML / CSS 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
You might like
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
消防安全检查制度
2014/02/04 职场文书
电台实习生求职信
2014/02/25 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
检讨书格式范文
2015/05/07 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers