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

随机推荐

部署和调优 2.8 mysql主从配置-2
配置主从准备工作在主上创建一个测试的数据库首先登录主的mysql,或者用绝对路径 /usr/local/mysql/bin/mysql mysql > create database db1 ...
javaScript之NodeList
NodeList对象是DOM操作取出的集合(实际上是基于DOM结构动态查询的结果),用来保存一组有序的节点,可以通过位置来访问这些节点,它并不是array的实例. Nodelist最大的特点就是它的 ...
Java更新
Java I/O 总结 JVM(8):JVM知识点总览-高级Java工程师面试必备细数JDK里的设计模式 Java中创建对象的5种不同方法关于Java Collections的几个常见问题类在什 ...
socket多线程方式案例
记下来,方便以后查看 User类 package com.xujingyang.ThreadSocket; import java.io.Serializable; public class User ...
用C++的基本算法实现十个数排序
冒泡排序法原理: 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成. 冒泡排序算法的运作如下 ...
css 层叠式样式表（1）
实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件 ...
bzoj4619 4619: [Wf2016]Swap Space
传送门分析首先不难想到我们要先处理容量变大的再处理容量变小的对于第一种情况我们自然要选择x小的先格式化,因为这个样暂时存储所需空间较小,可以使得情况更优而第二种情况y先考虑,因为这样对总空间的 ...
loj10131 暗的连锁
传送门分析首先我们知道如果在一棵树上加一条边一定会构成一个环,而删掉环上任意一条边都不改变连通性.我们把这一性质扩展到这个题上不难发现如果一条树边不在任意一个新边构成的环里则删掉这条边之后可以删掉 ...
Altium designer的PCB设计规则
PCB布线规则,布板需要注意的点很多,但是基本上注意到了下面的这此规则,LAYOUT PCB应该会比较好,不管是高速还是低频电路,都基本如此. 1. 一般规则 1.1 PCB板上预划分数字.模拟.DA ...
C#校验算法列举
以下是工作中常用的几种校验算法,后期将不断更新和校验 /// <summary> /// CS和校验 /// </summary> /// <param name=&q ...

小聊outline和border