CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでのアウトラインと境界線

アウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。これは要素を強調表示するために使用され、個々の側面に輪郭を付けるかどうかを指定することはできません。境界線と同様に、アウトラインはデフォルトでは表示されません。 Firefoxなどの一部のブラウザでは、フォーカスされた要素が細い輪郭で表示されます。

境界線はさらにカスタマイズできます。境界線の個々の側面をスタイリングし、それらのエッジを丸めます。境界線はスペースを占有し、ボックスのサイズに影響します。

構文

CSSボーダープロパティの構文は次のとおりです-

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

例

次の例は、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>

出力

これにより、次の出力が得られます-

CSSでのアウトラインと境界線

例

<!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>

出力

これにより、次の出力が得られます-

CSSでのアウトラインと境界線


  1. CSSの境界線と輪郭に対するカラープロパティの影響

    要素の境界線の色と輪郭の色を定義できます。境界線とは異なり、アウトラインはスペースを取りません。 border-colorプロパティは要素の境界線の色を設定するために使用され、outline-colorプロパティはそのアウトラインの色を設定するために使用されます。 構文 CSSborder-colorおよびoutline-colorプロパティの構文は次のとおりです- /*for setting border-color*/ Selector {    border-color: /*value*/ } /*for setting outline-color*/ Selec

  2. CSSで境界線画像を作成する方法

    CSSで境界線画像を作成するには、border-imageプロパティを使用します。以下は、CSSで境界線画像を作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .border1 {    border: 10px solid transparent;    padd