小tip: CSS3如何实现圆角的outline效果?
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=4765
一、首先,outline是个很牛逼的东西
温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的;3年之后,也就是13年,介绍了个没什么使用价值的东西:“纯CSS实现的outline切换transition动画效果”。
个把星期前,微博上抛出了个问题:
有没有什么方法利用CSS以及使用一层标签实现下面这个加号效果,【不能使用::before, ::after伪元素实现】【box-shadow效果不好,我试过了,小尺寸IE会糊边】,兼容IE9+浏览器。我没什么思路,但高手在民间!
果然高手在民间,结果@大地Dudy巧妙使用outline实现了Chrome浏览器下的十字效果。demo参见这里。
—————–我是低调的分隔线,大家都看不到我—————
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-
前缀,也就是-moz-outline-radius.
闻名不如见面,若是火狐,您可以狠狠地点击这里:FireFox下outline radius圆角效果Demo
效果如下截图:
相关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
实色边框效果啦!
实例先行,您可以狠狠地点击这里:CSS3 box-shadow模拟outline radius圆角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-radius
1像素的左右了吧,扩展30像素后,圆角就是30像素大小了。
然而,虽然肉眼看不出来,上面的方法实际有瑕疵,因为图片不是纯正的直角,有1像素的圆角。如果你想实现完美的内方外圆的效果,可以套一层标签,外面的标签使用border-radius
和box-shadow
就可以了。
转载于:https://www.cnblogs.com/SKuang/p/6602626.html
小tip: CSS3如何实现圆角的outline效果?相关推荐
- 利用CSS3实现圆角的outline效果的教程
一.首先,outline是个很牛的东西 1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline- ...
- CSS如何实现圆角的outline效果?
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:"页面可用性之outline轮廓外框的一些研究",还算挺有用的:3年之后,也就是13年, ...
- 小tip:CSS3下条纹方格斜纹背景的实现
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1605 一.效果抢先 ...
- 圆角按钮css,基于CSS3的一组圆角按钮 - YangJunwei
CSS3作为对CSS的升级,将原有的一些大模块分解为更小更易于表达的小模块,取得了相当的好评,也使得开发周期变短.过程变得愉快! 今天分享一下自己使用的基于CSS3的一组圆角按钮,效果不错,但欢迎升级 ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...
- 小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
- 关于SCI他引、自引、他引统计的小tip
关于SCI他引.自引.他引统计的小tip 论文引用 论文引用包括 **如何判断一篇论文/期刊是否为SCI论文呢?** 如何判断一个期刊是否被SCI收录 论文引用整理 其他 总结 论文引用 论文的引用最 ...
最新文章
- 彻底搞懂Nginx的五大应用场景
- NC:你觉得你吃的是草,其实你还是吃的土(遗传发育所朱峰)
- dijkstra 算法_最短路径问题Dijkstra算法详解
- 汉诺塔python递归函数_关于python递归函数实现汉诺塔
- [HDOJ2845]Beans(dp)
- nodejs全局安装和本地安装的区别
- DOMContentLoaded与interactive
- vaadin_在Vaadin和JSF之间选择
- 信安教程第二版-第8章防火墙技术原理与应用
- PHP扩展详解(一)
- Linux内核源代码分析——Linux内核的入口
- Python参考手册(第4版)
- java调用nlpir_NLPIR(ICTCLAS2013)Java语言调用示例
- Android系统定时开关机
- 快速迭代式开发使用方法总结
- 能量信号、功率信号及能量谱、功率谱
- Android 使用 7z 压缩字符串(工作总结)
- 2. RabbitMQ 的基本使用
- 聚合收款码怎么推广?
- linux宝塔视频教程,linux 宝塔面板安装rtmp简陋教程 (已加视频版教程)