前端技巧关于CSS轮廓线outline属性的简单用法

关于CSS轮廓线outline属性的简单用法

在CSS中可以通过outline属性为元素设置一个轮廓线,与边框属性类似,outline属性也可以设置轮廓线的宽度,样式和颜色,在Chrome等浏览器中,当文本输入框获得焦点的时候,输入框四周出现的“边框”就是轮廓线,轮廓线在设置方面和边框相似,但两者有较大的区别,本文主要总结一下两者之间的区别,首先来做一个示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
.all {width:220px;height:70px;background-color:#ddd;margin:20px;}
.a1,.a2 {margin:0px;background-color:#8dc;width:200px;height:50px;}
.a1 {border:10px solid #f69;}
.a2 {outline:10px solid #f69;}
</style>
</head>
<body>
<div class="all">
<div class="a1">
</div>
</div>
<div class="all">
<div class="a2">
</div>
</div>
</body>
</html>

这里给a1和a2两个div分别设置了相同样式的边框和轮廓线,单就线条本身来说,两者显示的效果是一样的,不同的是,设置了边框的元素其边框也占据了位置,而轮廓线是不占据位置的,所以a2这个div并没有完全填充它的父元素。

CSS边框和轮廓线.png

下面给一个元素同时设置边框和轮廓线,看看是什么效果,例如:

.a1 {background-color:#8dc;width:200px;height:50px;}
.a1 {border:10px solid #f69;outline:10px solid #339;}

这时边框和轮廓线互不影响,轮廓线显示在边框之外:

CSS边框和轮廓线2.png

与边框border不同的是,outline不支持单独为某一方向设置轮廓线,例如:

outline-left:10px solid #339; /*--这是无效的定义--*/

轮廓线outline有一个很实用的属性outline-offset,它可以设置轮廓线的偏移距离,例如刚才的例子,如果加上偏移值:

.a1 {outline-offset:5px;}

则显示的效果会是:

CSS边框和轮廓线3.png

这里四周的轮廓线都向外扩张了5个像素,这个偏移值还可以设置为负值,比如:

.a1 {outline-offset:-25px;}

这时候轮廓线相当于元素的内部偏移了指定的距离:

CSS边框和轮廓线4.png

这里的outline-offset属性可以实现一些简单的效果,例如下面这样的图片内部虚线框是很常见的装饰效果:

图片内部虚线框.png

实现方式很简单,采用的就是虚线的轮廓线:

img {outline:2px dashed rgba(255,255,255,0.8);outline-offset:-15px;}

文本开头曾提到,当文本输入框获得焦点的时候,输入框周围会出现默认的轮廓线,这里如果想去掉这个轮廓线,可以有如下定义:

:focus {outline:none}

当然,不建议将焦点元素的轮廓线去除,因为它可以帮助使用键盘tab切换焦点。如果不喜欢默认的轮廓线样式,大可根据自己的喜好或网页风格自定义轮廓线的样式。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/149.html