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

CSSborder-image-slice

CSSのborder-image-sliceプロパティは、境界線の画像をスライスするために使用されます。

例

次のコードを実行して、border-image-sliceプロパティを実装してみてください-

<html>
   <head>
      <style>
         #borderimg1 {
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(https://tutorialspoint.com/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 50;
         }
      </style>
   </head>
   <body>
      <p id = "borderimg1">This is image border example.</p>
   </body>
</html>

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

    アウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。これは要素を強調表示するために使用され、個々の側面に輪郭を付けるかどうかを指定することはできません。境界線と同様に、アウトラインはデフォルトでは表示されません。 Firefoxなどの一部のブラウザでは、フォーカスされた要素が細い輪郭で表示されます。 境界線はさらにカスタマイズできます。境界線の個々の側面をスタイリングし、それらのエッジを丸めます。境界線はスペースを占有し、ボックスのサイズに影響します。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    bor

  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