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 ...

随机推荐

CPU, PSU, SPU的区别
It all started in January 2005 with Critical Patch Updates (CPU). Then Patch Set Updates (PSU) were ...
CentOS6.5安装完没有网络的解决办法
昨天下了个CentOS 6.5 Minimal 版,在VMware 10下安装好了之后,发现上不了网,PING外网也PING不通. 在网上搜了一下,发现Linux安装好了之后,网卡默认是没有启动的,下 ...
LAMP 3.5 mysql备份与恢复
备份库的命令 mysqldump -uroot -pwangshaojun discuz > /data/discuz.sql 指定用户密码,重定向到某文件恢复 mysql -uroot -p ...
windows系统中启动应用需要的端口被别的程序占用
开始--运行--cmd 进入命令提示符输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...
springmvc配置式开发下的视图解析器
多个视图解析器优先级:
ARC059F
传送门分析见ptx大爷博客代码 #include<iostream> #include<cstdio> #include<cstring> #include& ...
ZROI2018提高day1t2
传送门分析考场上看错了第一个条件,于是觉得是个简单贪心,随便取了每一个点的最大收益然后算了一下,就得了40pts...看来读对题很重要呀qwq.实际的正解是这样的:我们将每一个i与f[i]连一条边 ...
Django models模型ORM
一.ORM介绍映射关系: 表名 -------------------->类名字段-------------------->属性表记录----------------->类实例 ...
Servlet HTTP 状态码以及获得浏览器URL
Servlet HTTP 状态码 HTTP 请求和 HTTP 响应消息的格式是类似的,结构如下: 初始状态行 + 回车换行符(回车+换行) 零个或多个标题行+回车换行符一个空白行,即回车换行符一个 ...
转/keystore和truststore的区别
keytool是java自带的工具用于产生密钥 keystore可以看成一个放key的库,key就是公钥,私钥,数字签名等组成的一个信息. truststore是放信任的证书的一个store. 那他们 ...

小聊outline和border