CSSで要素の右枠を削除する方法-CSSチュートリアル-php.cn

CSSで要素の右枠を削除する方法

WBOY

リリース： 2021-11-29 10:56:17

オリジナル

4354 人が閲覧しました

CSS では、「border-right」属性を使用して、要素の右枠を削除できます。この属性の機能は、要素の右枠のスタイルを設定することです。この属性が「none」の場合、要素の右側の境界線を削除するには、要素に「border-right:none;」スタイルを追加するだけです。

CSSで要素の右枠を削除する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css で要素の右側の境界線を削除する方法

css には、右側を制御できる border-right 属性があります。要素の境界線スタイル以下では、border-right 属性を使用して要素の右境界線を設定する方法を示す例を見てみましょう。

最初に完全な要素の境界線を作成します。例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style type="text/css"> 
div{
    width:250px;
    height:250px;
    border:10px solid;
    border-image: linear-gradient(red,yellow,blue)30 30;
    
    }
    </style>
    <div></div> 
</body>
</html>

ログイン後にコピー

出力結果:

CSSで要素の右枠を削除する方法

境界線を右に追加: none スタイルの例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style type="text/css"> 
div{
    width:250px;
    height:250px;
    border:10px solid;
    border-image: linear-gradient(red,yellow,blue)30 30;
    border-right:none
    }
    </style>
    <div></div> 
</body>
</html>

ログイン後にコピー

出力結果:

CSSで要素の右枠を削除する方法