对，你没有看错，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实现圆角效果的更多相关文章

  1. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  2. css 圆角效果

    http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...

  3. css实现圆角效果

    源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  4. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  5. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  6. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  7. Android中实现ListView圆角效果[转]

    本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...

  8. 【实用技巧】去除BootStrap所有圆角效果

    满屏的圆角有没有审"美"疲劳啊?教你一键去除所有圆角效果: * { -webkit-border-radius: 0 !important; -moz-border-radius: ...

  9. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

随机推荐

  1. mybatis的延迟加载

    1. 什么是延迟加载 举个例子: 如果查询订单并且关联查询用户信息.如果先查询订单信息即可满足要求,当我们需要查询用户信息时再查询用户信息.把对用户信息的按需去查询就是延迟加载. 所以延迟加载即先从单 ...

  2. 【pac4j】OAuth 认证机制 入门篇

    1,pac4j是什么? pac4j是一个支持多种支持多种协议的身份认证的Java客户端. 2,pac4j的12种客户端认证机制:目前我只有用过第一和第八种. OAuth (1.0 & 2.0) ...

  3. postgresql如何维护WAL日志/归档日志

    WAL日志介绍 wal全称是write ahead log,是postgresql中的online redo log,是为了保证数据库中数据的一致性和事务的完整性.而在PostgreSQL 7中引入的 ...

  4. Southwestern Europe Regional Contest 2014 题解

    时间:2017/9/8 题目8/10 Rank 5/150 体会:三星的题目和国内区域赛差距大,大多数题读懂题意就能做,所以静心读题是关键,套路性太深. A: 题意:给出一个算式,算式中的数字用大写字 ...

  5. basepath的作用 (转)

    转自:http://blog.csdn.net/randomnet/article/details/8630754   在谈basePath之前,先来讨论一下相对路径与绝对路径的区别.    相对路径 ...

  6. Java序列化详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt228 以前在使用hibernate时候,domain域模型的JavaBean ...

  7. 浅谈MVC

    一.MVC的产生之源 MVC是Model.View.Controller这三个英文单词的缩写,从这三个单词的含义中我们可以看出MVC的核心是什么?显而易见,Model指的是模型,在某些地方你也可以理解 ...

  8. 自己编写服务启动脚本(一)：functions文件详细分析和说明

    本文目录: 1.几个显示函数2.action函数3.is_true和is_false函数4.confirm函数5.pid检测相关函数 5.1 checkpid.__pids_var_run和__pid ...

  9. Docker - Failed to connect to localhost port 4000: Connection refused

    转载.翻译自 https://stackoverflow.com/questions/44014698/docker-failed-to-connect-to-localhost-port-4000- ...

  10. JMeter打开脚本失败 如何解决？

    最近有碰到JMeter打开之前的脚本,报错了,见下图: 后来发现这是因为之前保存脚本的 jmeter 和这次打开脚本的 jmeter 版本不一致(图一)或者版本一致而插件没有保持同步(图二)的原因: ...