srcmini本文概述
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>
评论前必须登录！
注册