个性化阅读
专注于IT技术分析

CSS轮廓outline

本文概述

CSS轮廓就像CSS边框属性一样。它有助于你在元素周围绘制额外的边框以获得视觉关注。

它就像边框一样容易。

请参阅以下示例:

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
        background-color: #eee;
        outline: 3px solid red;
        border: 3px solid lightgreen;
        padding: 5px 10px;
}
</style>
<div class="box">Welcome to srcmini</div>
</body>
</html>

边框和轮廓之间的区别

乍一看, 边框和轮廓看起来很相似, 但是它们之间有一些非常重要的区别:

  • 在边框中时, 不可能为元素的四个侧面应用不同的轮廓宽度, 样式和颜色;你可以将提供的值应用于元素的所有四个侧面。
  • 边框是元素尺寸的一部分, 而轮廓线不是元素尺寸的一部分。就是说, 将轮廓应用于元素的粗细并不重要, 其尺寸不会改变。

outline属性是一种简写属性。它可以分为轮廓宽度, 轮廓样式和轮廓颜色属性。如果需要, 它可以帮助你单独使用任何属性。

请参阅以下示例:

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
        background-color: #eee;
        border: 3px solid Lightgreen;
        padding: 5px 10px;
        outline-width: 3px;
        outline-style: solid;
        outline-color: red;
}
</style>
<div class="box">Welcome to srcmini</div>
</body>
</html>

在上面的示例中, 你可以看到三个大纲属性:

轮廓宽度:类似于边距和填充。它可以是绝对值或相对值, 也可以是预定义的轮廓宽度值之一, 即薄, 中或厚。最好使用绝对值或相对值, 因为不同的浏览器在使用预定义的轮廓宽度值(例如, 细, 中或粗)时会做出不同的解释。

轮廓颜色:指定你用于轮廓的颜色。它支持HTML和CSS中所有可用的颜色。

轮廓样式:在上面的示例中, 我们仅使用了实体轮廓样式, 而有很多轮廓样式, 即隐藏, 虚线, 虚线, 实体, 双线, 凹槽, 山脊, 插入和起始。

让我们以一个示例来演示不同轮廓样式的用法。

请参阅以下示例:

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
        outline-color: red;
        outline-width: 4px;
        margin: 10px;
        float: left;
        border: 2px solid lightgreen;
        padding: 5px 10px;
}
</style>
<div class="box" style="outline-style: dashed;">This is dashed outline.</div>
<div class="box" style="outline-style: dotted;">This is dotted outline.</div>
<div class="box" style="outline-style: double;">This is double outline.</div>
<div class="box" style="outline-style: groove;">This is groove outline.</div>
<div class="box" style="outline-style: inset;">This is inset outline.</div>
<div class="box" style="outline-style: outset;">This is outset outline.</div>
<div class="box" style="outline-style: ridge;">This is ridge outline.</div>
<div class="box" style="outline-style: solid;">This is solid outline.</div>
</body>
</html>

轮廓偏移

轮廓偏移用于创建轮廓和边框之间的距离。

它采用CSS长度单位, 边框和轮廓之间的空白将是透明的, 然后采用父元素的背景色。这样你就可以看到轮廓和边框之间的明显差异。

让我们来看一个例子, 看看轮廓和边框之间的区别。

请参阅以下示例:

<!DOCTYPE html>
<html>
<style type="text/css">
.box {
        background-color: #eee;
        outline: 3px solid red;
        outline-offset: 6px;
        border: 3px solid Lightgreen;
        padding: 5px 10px;
}
</style>
<div class="box">Welcome to srcmini</div>
</body>
</html>
赞(0)
未经允许不得转载:srcmini » CSS轮廓outline
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!