CSS 中的轮廓与边框

cssweb developmentfront end technology更新于 2025/2/2 12:28:17

轮廓不占用空间，如果设置了，它会显示在边框周围。它用于突出显示元素，我们无法指定各个边是否应该有轮廓。与边框一样，轮廓默认不显示。在某些浏览器(例如 Firefox)中，获得焦点的元素会显示细轮廓。

边框可以进行更大程度的自定义。我们可以为边框的各个边设置样式，并使其边缘圆润。边框会占用空间并影响盒子的大小。

语法

CSS border 属性的语法如下 −

Selector {
   border: /*value*/
   outline: /*value*/
}

示例

以下示例演示了 CSS 的 outline 和 border 属性 −

<!DOCTYPE html>
<html>
<head>
<style>
p {
   display: flex;
   float: left;
   margin: 20px;
   padding: 12px;
   width: 30%;
   outline: thin dotted;
   background-color: lavender;
}
p + p {
   width: 250px;
   outline: none;
   border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: auto;
   width: 70%;
   outline: thick double;
   background-color: lightgoldenrodyellow;
}
h3 {
   border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>