css之outline实现圆角效果
对，你没有看错，outline也可以实现圆角，不过请先读完自然会知道结果；
==========================================================================================================================================================================
都知道border属性和outline属性，都是边框的意思，
其次，支持的属性值几乎都是一样的，例如，outline-style和border-style值dotted, dashed, solid, ...之类的，一些语法也几乎一样。
对浏览器的支持
outline严格来讲属于CSS3属性，但是IE8+浏览器就支持了。外挂一句，IE9+浏览器的outline还支持invert，专门针对outline-color. 所以，如果你的项目不用管IE6/IE7浏览器，可以把outline挂在心中，有时候说不定会帮忙的支持
三 是否占据空间
这点我们都知道 border 属性是占据位置的，假设元素100*100像素，我们给元素设置border:10px solid，则实际该元素占据的尺寸至少就是120*120像素；但是outline就不一样了，他根本不占位置
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0 auto; }
#aa{
width: 500px;
height: 500px;
background: red;
outline: 10px yellow solid;
} </style>
</head>
<body>
<div id="aa"> </div>
</body>
</html>
三、outline的圆角效果
border有圆角效果那么outline有没有圆角效果呢
我们来试试
用代码说话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0 auto;
}
img {
outline: 30px solid #cd0000;
-moz-outline-radius: 30px;
}
</style>
</head>
<body>
<div style="width:100px;height:800px;margin-top:50px">
<img src="f1.png" alt="">
</div> </body>
</html>
我们在各大浏览器看看效果
谷歌
是不是没有效果
360
也没有
火狐呢
我靠；火狐可以6666但是必须加火狐的前缀
是不是很松松啊！如果你观察足够仔细，会发现，outline-radius和border-radius还是有区别的？看出来没，区别在哪里？答对有奖……哈，没错，你们都答错了！没有任何区别，outline-radius的圆角规则、语法之类跟border-radius就是一样的。
唯一的区别，也就是兼容性问题，不是看出来的，是试出来的。，目前，除了FireFox浏览器支持outline-radius，其他浏览器都是空大屁！
如果是仅webkit/blink浏览器支持还好说，至少移动端还可以用用，搞了个仅仅FireFox支持，玩毛线啊！不对，连毛线都没得玩！
亲，不要绝望啊，车到山前必有路，此路进去……
祝大家 十一快乐
( ^_^ )/~~拜拜
css之outline实现圆角效果的更多相关文章
- CSS圆角效果
看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...
- css 圆角效果
http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...
- css实现圆角效果
源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- 使IE6同样支持圆角效果
之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...
- CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
- Android中实现ListView圆角效果[转]
本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...
- 【实用技巧】去除BootStrap所有圆角效果
满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
随机推荐
- sgu102 Coprimes
102. Coprimes time limit per test: 0.25 sec. memory limit per test: 4096 KB For given integer N (1&l ...
- hdu 5040 Instrusive
Instrusive Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Tota ...
- 打印1到最大的n位数-Java
在练习剑指offer的时候,第12题打印1到最大的n位数的时候,想找个java版的,但大家要么用BigInteger做,要么给出其他的方法.我觉得要给就给最好的方法,下面是我自己参考C++代码写的ja ...
- python基础教程（一）
之所以选择py交易有以下几点:1.python是胶水语言(跨平台),2.python无所不能(除了底层),3.python编写方便(notepad++等文本编辑器就能搞事情),4.渗透方面很多脚本都是 ...
- 服务端性能测试 TPS
针对服务器端的性能,以TPS为主来衡量系统的性能,并发用户数为辅来衡量系统的性能,如果必须要用并发用户数来衡量的话,需要一个前提,那就是交易在多长时间内完成,因为在系统负载不高的情况下,将思考时间( ...
- matlab-常用函数（4）
find()函数的用法 搜索矩阵中指定数值的下标,若指定值有多个,则返回多个下标: x = 1:2:20 x = 1 3 5 7 9 11 13 15 17 19 k = find(x==13) k ...
- java_jstl 标签库
jstl标签库的使用以及介绍 jstl:jsp标准标签库,是jsp的标签集合,它里面封装了jsp通用的核心功能,比如:建构化的任务,迭代,条件判断,xml 文档的操作,国际化标签,sql标签,还提供框 ...
- 使用spring框架处理编码问题
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp90 我们在开发时,经常要对中文字符进行处理,进行处理中文字符的方式也 ...
- 利用 VMWare 搭建随机拓扑网络
这篇文章是计算机网络上机实验课的作业. 实验任务:利用 VMWare 搭建一个由 5 个主机组成的随机拓扑的网络.要求该网络中至少有 2 个子网,两个路由器 .实验的网络拓扑图如下: 网络中有两个路由 ...
- 如何解决xshell中无法输入中文的问题
自从安上了xshell以后,用着那叫一个顺手,美中不足的就是一直无法输入中文.不过,既然学习IT,就要习惯英文嘛~直到--我遇到了脚本,写好一个脚本,必要的注释是少不了的,但是作为一个英文渣渣,我真的 ...