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

随机推荐

hadoop block大小为128的原因
1.减轻了namenode的压力原因是hadoop集群在启动的时候,datanode会上报自己的block的信息给namenode.namenode把这些信息放到内存中.那么如果块变大了,那么nam ...
myeclipse实用快捷键
笔者这里总结的是个人在使用myeclipse时常用的快捷操作,总结如下: 1.Ctrl + / :为选中的一段代码加上或去掉注释符 Ctrl + Shift + / :( ...
Java Swing 如何让窗体居中显示
如题,其他不多说,直接上代码! package com.himarking.tool; import java.awt.Toolkit; import javax.swing.JFrame; @Sup ...
javaScript之NodeList
NodeList对象是DOM操作取出的集合(实际上是基于DOM结构动态查询的结果),用来保存一组有序的节点,可以通过位置来访问这些节点,它并不是array的实例. Nodelist最大的特点就是它的 ...
close、flush、read、readline、seek、tell、truncate、write的使用
1.close关闭文件 f1= open("ha.log","r+",encoding="utf-8") data = f1.read() ...
将一个string字符串变量分解为字符输出
我们定义一个string 变量str ,然后通过str.length()可以获得该字符串变量的长度: #include<iostream> #include<string> u ...
JS jquery ajax 已看1 有用
4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...
算法Sedgewick第四版-第1章基础-013一用stack实现自动补全表达式括号
package algorithms.exercise; import algorithms.ADT.Stack; import algorithms.util.StdIn; import algor ...
Mac OS X 安装教程
1)10.8.3 http://bbs.pcbeta.com/viewthread-1317754-1-1.html 2)10.9 http://blog.csdn.net/kissing_huo/a ...
ZROI2018提高day1t3
传送门分析考场上想到了先枚举p的长度,在枚举这个长度的所有子串,期望得分40~50pts,但是最终只得了20pts,这是因为我写的代码在验证中总是不断删除s'中的第一个p,而这种方式不能解决形如a ...

小聊outline和border