border与outline:

border属性：

border-width、border-style、border-color 其中border-style可以为none或hidden

outline（轮廓）
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。

outline-style可为none（不含有hidden属性）

总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
2.outline有可能是非矩形的（火狐浏览器下）

在FireFox浏览器中，就有和outline匹对的圆角夫妻outline-radius

示例：

使用outline实现下图效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>直角三角形（右下角）</title>

    <style type="text/css">

        .use-outline-offset{

            margin-left: auto;

            margin-right: auto;

            width: 200px;

            height: 200px;

            border:40px solid #000000;

            background-color:#cccccc;

            outline-width:40px;

            outline-style:dotted;

            outline-offset:-80px;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div class="use-outline-offset"></div>

</body>

</html>

效果图：

box-shadow模拟outline的圆角效果

outline-radius虽然没戏了，但是，我们可以使用其他属性，可以实现类似的效果，比方说，图形构建大神之一的box-shadow.

我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，当然，扩大的区域是实色区域。我们就可以利用这一特性，模拟实现不影响元素占据尺寸的outline实色边框效果啦！

实例先行，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆角</title>

    <style type="text/css">

        .outline-radius {

            margin: 200px auto;

            width: 400px;

            height: 300px;

            border-radius: 1px;

            box-shadow: 0 0 0 30px #cd0000;

        }

        .outline-radius>img{

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

<div class="outline-radius">

    <img src="img/mm1.jpg">

</div>

</body>

</html>

效果图如下：

下面简单解释下两行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和outline这两个属性的用法。

参考文章：

小聊outline和border的更多相关文章

outline使用方法,outline与border的区别:
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
outline与border的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
【前端小技巧】利用border画三角形及梯形
border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色值: border-width 粗细 none/hidden/solid/dashed/dot ...
编写css相关注意事项以及小技巧
一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...
CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
CSS如何实现圆角的outline效果？
一.首先,outline是个很牛逼的东西温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
CSS border系列
本文更新版链接一.border 关于border的3个属性,分别为border-width.border-style.border-color. 其中,border-color默认为元素内容的前景色 ...
自定义select 小三角
把select小三角换成自己的图片效果: css样式: <style> #my_select { display: flex; display: -webkit-flex; width: ...
JavaScript小练习2-网页换肤
题目分析三个皮肤切换按钮的选择用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onl ...

随机推荐

vue axios 应用
vue安装axios cnpm install axios 安装成功后/项目/node_modules/目录下有axios文件夹在package.json文件中devDependencies字段中添 ...
使用NDK编译 libyuv <转>
官方源码:http://code.google.com/p/libyuv/简介: libyuv is an open source project that includes YUV scaling ...
Django之Model操作进阶篇
常用参数 null 数据库中字段是否可以为空 db_column 数据库中字段的列名 default 数据库中字段的默认值 primary_key 数据库中字段是否为主键 db_index 数据库中字 ...
使用Aspectj 的配置文件方式进行aop操作
re.findall 两个连续匹配成功的输出后一个
ROS探索总结（六）——使用smartcar进行仿真
转自:https://www.ncnynl.com/archives/201609/843.html 总结: 一.机器人描述文件三个: 机器人主体body文件: gazebo属性文件: 主文件 sma ...
nodejs安装配置
1.安装node.js(6.3.0)2.检测PATH环境变量是否配置了Node.jscmd下node --version3.D:/www/nodejs文件夹下创建hello.jsvar http = ...
js 操作属性，操作内容，
disable=“disable” 让按钮变得不可选先建一个按钮,让class = ’btn‘ 然后, 添加,修改属性 document.getElementsByClassName('btn')[ ...
Linux kdb命令
一.简介 Linux 内核调试器(KDB)允许您调试 Linux 内核.这个恰如其名的工具实质上是内核代码的补丁,它允许高手访问内核内存和数据结构.KDB 的主要优点之一就是它不需要用另一台机器进行调 ...
85D Sum of Medians
传送门题目 In one well-known algorithm of finding the k-th order statistics we should divide all element ...

小聊outline和border