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

随机推荐

H264中的SPS、PPS提取与作用<转>
牛逼的视频会议网站:http://wmnmtm.blog.163.com/blog/#m=0 ++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
IDEA中Git实战
工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁场景一:小张创建项目并提交到远程Git仓库场景二:小袁从远程Git仓库上获取项目源码场景三:小 ...
Android 自定义带回调的Dialog 及EditText相关
import android.app.Activity; import android.content.Context; import android.text.Editable; import ...
【Android异常】The specified child already has a parent. You must call removeView() on the child's parent first.
错误信息: Caused by: java.lang.IllegalStateException: The specified child already has a parent. You must ...
c++11： thread_local
thread_local变量是C++ 11新引入的一种存储类型.它会影响变量的存储周期(Storage duration),C++中有4种存储周期: automatic static dynamic ...
SQL语句兼容性规范
一.DDL兼容性规范(防止表结构变更后,原有的SQL执行报错)只能增加字段或修改字段长度(字段长度改大),不能修改字段名字和类型,不能删除字段不能删除表或者修改表名称二.DML兼容性规范insert ...
获取当前设备的CPU个数
public class Test { public static void main(String[] args) { //获取当前设备的CPU个数 int availableProcessors ...
面试题: 1天的java面试题已看1
1,自我介绍下,我直接说的项目经历,(哪年在哪个公司呆过) 2,问是否有带过团队的经历,我说去年带过一次. 3,Struts是单例模式还是多例模式?我先说单例模式,后说多例模式. Struts1是单例 ...
杭电acm 1076题
水题,一个求闰年的题目,复习一下闰年的求法.... 1,如果能被4整除但不能被100整除的是闰年 2,能被400整除的是闰年题目大意是:给定一个开始年份T以及一个正数N,要求求出从T开始,到了哪一年 ...
Linux如何修改网络环境参数
如下设置: 检验是否可以连通,就使用ping命令ping 网关开始的时候总是现实unreachable 设置IP:sudo ifconfig eth0 133.133.133.190 netmask ...

小聊outline和border