数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学CSS中的轮廓与边框
轮廓不占用空间，如果设置了轮廓，它会显示在边框周围。它用于突出显示元素，我们无法指定各个边是否应该有轮廓。与边框一样，轮廓默认不显示。在某些浏览器（例如 Firefox）中，获得焦点的元素会显示细轮廓。
边框可以进行更广泛的自定义。我们可以为边框的各个边设置样式并圆角。边框占用空间并影响盒模型。
轮廓
轮廓绘制在边框之外。它是围绕元素绘制的一条线。以下是属性。我们可以使用单个简写属性设置所有这些属性：
outline-style: outline-color: outline-width: outline-offset:
语法
CSS 轮廓属性的语法如下：
Selector {
outline: /*value*/
}
示例
让我们来看一个例子。您可以清楚地看到轮廓甚至在边框之外：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline: yellow solid 5px;
}
p {
outline: blue dashed 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
边框
边框使用 border 属性设置。以下是属性。我们可以使用单个简写属性设置所有这些属性：
border-style
border-width
border-color
注意 - border-style 是必需的，否则边框将不可见。
语法
CSS border 属性的语法如下：
Selector {
border: /*value*/
}
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 2px dashed yellow;
}
p {
border: 3px dotted orange;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text</p>
</body>
</html>
示例
以下示例说明了 CSS 轮廓和边框属性：
<!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>
更新于：2023年12月26日
662 次浏览
广告