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

CSSborder-image-source

CSSのborder-mage-sourceプロパティ 画像パスを設定するために使用されます。次のコードを実行して、 border-image-sourceを実装してみてください。 プロパティ：

例

<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ブラー

    Webサイトをデザインするときに、特定の画像にぼかし効果を追加することを決定する場合があります。たとえば、喫茶店のウェブサイトをデザインしている場合、ユーザーが読めるように画像の前にテキストを配置できるように、画像をぼかしたい場合があります。 そこでCSSのぼかし関数が登場します。ぼかし関数は、指定された入力画像にぼかし効果を適用します。これを「フィルター」プロパティとともに使用して、画像をぼかします。 このチュートリアルでは、例として、CSSブラー関数の基本と、それを使用してコード内の画像にブラー効果を適用する方法について説明します。このチュートリアルを読み終えると、CSSブラー

  2. CSSボーダー画像

    CSSのborder-imageプロパティは、最初は頭を悩ませるのが少し難しいです。この記事では、border-imageプロパティとは何か、それを使用する方法、およびさまざまなブラウザで使用する場合のその特異性について説明します。 CSS教育のこの時点で、borderプロパティが何であるかを知る必要があります。更新するには、要素の周囲の境界線を指定するために省略形を使用するプロパティです。構造は次のとおりです。 border: 2px /*width*/ dashed /*style*/ green; /*color*/ borderと