CSS で透明な境界線を追加する
透明な境界線は、border プロパティを transparent に設定することによって作成される、ページ上の 2つの要素間の目に見えない境界です。 透明な境界線は、多くの場合、実際の境界線なしで要素間に重複効果またはスペースを作成します。
CSS ボーダーを透明にする
CSS ボーダーを透明にする方法は複数あります。 1つの方法は、不透明度に CSS3 プロパティを使用し、1 未満の値に設定して、境界線を含む要素全体を透明にすることです。
もう 1つの方法は、RGBA カラー モデルを使用することです。これにより、赤、緑、青の各カラー チャネルの不透明度を指定できます。 16 進数のアルファ チャネル表記を使用して、境界線の不透明度を設定することもできます。
透明な境界線は、透明な画像を指す URL 値を持つ border-image プロパティを使用して作成できます。 画像は任意の画像エディターで作成でき、背景が透明な png ファイルとして保存する必要があります。
URL 値が border-image プロパティに追加されると、境界線が透明になります。
UI 要素に透明な境界線を追加する
UI 要素に透明な境界線を追加することは、画面の残りの部分から目立つようにする簡単な方法です。 これを行うには、CSS プロパティ border を使用して transparent に設定する必要があります。
たとえば、透明な境界線が必要なボタンがある場合は、次の CSS を追加します。
button {
border: transparent;
}
これが完了すると、ボタンの境界線が透明になり、背景が透けて見えるようになります。 これは、UI を忙しくすることなく、UI に視覚的な関心を追加するための優れた方法です。
コード例:
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Create a Transparent button
using HTML and CSS
</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
h1 {
color: green;
}
/* Styling the button */
.btn {
cursor: pointer;
border: 1px solid #3498db;
background-color: transparent;
height: 50px;
width: 200px;
color: #3498db;
font-size: 1.5em;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<h1>Transparent button</h1>
<h3>
Create a Transparent button
using HTML and CSS
</h3>
<button class="btn">Click me!</button>
</body>
</html>
テーブルに透明な境界線を追加する
テーブルに透明な境界線を追加する方法はいくつかあります。1つの方法は、CSS の border プロパティを使用することです。 border-style を solid に、border-color を transparent に設定して、ソリッドで透明な境界線を作成できます。
透明な境界線を作成する別の方法は、HTML の border 属性を使用することです。 完全に透明な境界線を作成するには、border 属性を 0 または none に設定します。
最後に、背景が透明な画像を使用して境界線を作成できます。
コード例:
<!DOCTYPE html>
<html>
<head>
<style>
html
background-color: #ff9
color: white
table
border-collapse: separate
border-spacing: 1em
td
background-image: url('/img/DelftStack/logo.png')
background-position: auto auto
background-attachment: fixed
background-clip: padding-box
padding: 2em
color: #fff
</style>
</head>
<body>
<h2>Transparent border of table</h2>
<table>
<tr>
<td>qwe 1</td>
<td>qwe 1</td>
<td>qwe 1</td>
</tr>
<tr>
<td>asd 2</td>
<td>asd 2</td>
<td>asd 2</td>
</tr>
<tr>
<td>zxc 3</td>
<td>zxc 3</td>
<td>zxc 3</td>
</tr>
</table>
</body>
</html>
画像に透明な境界線を追加する
画像に透明な境界線を追加するには、いくつかの方法があります。 透明な境界線を追加する 1つの方法は、CSS を使用することです。
CSS の border プロパティを使用して、画像の境界線を追加できます。 color プロパティの transparent 値を使用して、ボーダーのスタイル、色、および幅を透明に設定できます。
画像に透明な境界線を追加するさらに別の方法は、HTML の border 属性を使用して画像に境界線を追加することです。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>Transparent border</title>
<style>
.image {
width: 200px;
height: 200px;
padding: 55px;
border-radius: 300px; /* for getting circle shape */
border: double 15px rgba(254, 254, 254, 0.7);
background: rgba(254, 254, 254, 0.7);
}
body {
background: url("/img/DelftStack/logo.png");
height: 100%;
}
</style>
</head>
<body>
<font color="brown"><h2>Transparent Image Circle</h2></font>
<div class="image">
Transparent done by rgba
</div>
</body>
</html>
まとめ
したがって、この記事から、透明な境界線のコードを確認できます。 UI 要素に透明な境界線を追加したセクションから、ボタンの透明な境界線のコードを取得できます。
画像とテーブルの透明な境界線については、他のコードを確認することもできます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn