亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS畫像

border-radius プロパティ

CSS3 の角の丸いプロパティは、border-radius (「境界線の半徑」を意味します) 1 つのプロパティのみを設(shè)定する必要があります。このプロパティに値を指定して、4 隅すべての半徑を同時に設(shè)定します。すべての法的な CSS 測定値 (em、px、パーセントなど) を使用できます。

丸い畫像: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style type="text/css">
    div {
        height: 100px;
        width: 100px;
        background: black;
        border-radius: 18px;
        border:5px solid blue;
    }
   </style>
  </head> 
  <body>
      <div></div>
  </body>  
</html>

楕円形の畫像: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
    div {
        height: 150px;
        width: 200px;
        background: red;
        border-radius: 50%;
        border:5px solid blue;
    }
   </style>
  </head> 
  <body>
      <div></div>
  </body>  
</html>

ボーダー屬性を使用してサムネイルを作成します。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
        img {
            border: 2px solid black;
            border-radius: 14px;
            padding: 15px;
        }
   </style>
  </head> 
  <body>
      <p>創(chuàng)建縮略圖。</p>
      <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="css3" width="400" height="300">
  </body>  
</html>


レスポンシブ畫像

レスポンシブ畫像は、さまざまな畫面サイズに自動的に適応します。

畫像を自由に拡大縮小する必要があり、畫像の拡大サイズが元の最大値を超えない場合は、次のコードを使用できます: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            img {
                max-width: 100%;
                height: auto;
                }
     </style>
  </head> 
  <body>
      <p>響應(yīng)式圖片</p>
      <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="css3" width="1000" height="600">
  </body>  
</html>

カードスタイル畫像

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            body {margin:25px;}
        div.polaroid {
         width: 80%;
         background-color: white;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         margin-bottom: 25px;
        }
        div.container {
         text-align: center;
         padding: 10px 20px;
        }
     </style>
   </head> 
   <body>
    <div class="polaroid">
        <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Norway" style="width:100%">
        <div class="container">
           <p>第一張圖片</p>
        </div>
     </div>
    <div class="polaroid">
       <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Norway" style="width:100%">
    <div class="container">
       <p>第二章圖片</p>
    </div>
    </div>
    </body>  
</html>


フィルター屬性

Alpha 透明度を設(shè)定する

Blur ぼかし効果を設(shè)定する
Chroma 指定した色の透明度を設(shè)定する

Dropshadow キャストシャドウを設(shè)定する
Fliph 水平反転

Flipv 垂直反転
Glow 追加外側(cè)への光の効果オブジェクトの境界線

Grayscale グレースケールを設(shè)定します (畫像の色を減らす)
Invert ネガティブ効果を設(shè)定します

Light 光の投影を設(shè)定します
Mask 透明フィルムを設(shè)定します

Shadow 影の効果を設(shè)定します
Wave 正弦波紋を使用して中斷します寫真

Xray 輪郭のみを表示 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            img {
            width: 33%;
            height: auto;
            float: left; 
            max-width: 235px;
        }
        .blur {-webkit-filter: blur(4px);filter: blur(4px);}
        .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
        .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
        .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
        .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
        .invert {-webkit-filter: invert(100%);filter: invert(100%);}
        .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
        .saturate {-webkit-filter: saturate(7); filter: saturate(7);}
        .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
        .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
    </style>
  </head> 
  <body>
      <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="blur" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="brightness" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="contrast" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="grayscale" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="huerotate" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="invert" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="opacity" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="saturate" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="sepia" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
        <img class="shadow" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Pineapple" width="300" height="300">
  </body>  
</html>

レスポンシブ畫像アルバム


畫像モーダル (モーダル)

畫像をレンダリングするための CSS と JavaScript一緒に。

まず、CSS を使用して、デフォルトでは非表示になっているモーダル ウィンドウ (ダイアログ) を作成します。

次に、JavaScript を使用してモーダル ウィンドウを表示し、畫像をクリックすると、ポップアップ ウィンドウに畫像が表示されます: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
        <style type="text/css">
            div.img {
        border: 1px solid #ccc;
        }
        div.img:hover {
        border: 1px solid #777;
        }
        div.img img {
        width: 100%;
        height: auto;
        }
        div.desc {
        padding: 15px;
        text-align: center;
        }
        * {
        box-sizing: border-box;
        }
        .responsive {
        padding: 0 6px;
        float: left;
        width: 24.99999%;
        }
        @media only screen and (max-width: 700px){
        .responsive {
        width: 49.99999%;
        margin: 6px 0;
        }
        }
        @media only screen and (max-width: 500px){
        .responsive {
        width: 100%;
        }
        }
        .clearfix:after {
        content: "";
        display: table;
        clear: both;
        }
    </style>
  </head> 
  <body>
        <div class="responsive">
             <div class="img">
            <a target="_blank" href="img_fjords.jpg">
             <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Trolltunga Norway" width="300" height="200">
            </a>
            <div class="desc">第一張圖</div>
             </div>
            </div>
            <div class="responsive">
             <div class="img">
            <a target="_blank" href="img_forest.jpg">
             <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Forest" width="600" height="400">
            </a>
            <div class="desc">第二張圖</div>
             </div>
            </div>
            <div class="responsive">
             <div class="img">
            <a target="_blank" href="img_lights.jpg">
             <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Northern Lights" width="600" height="400">
            </a>
            <div class="desc">第三張圖</div>
             </div>
            </div>
            <div class="responsive">
             <div class="img">
            <a target="_blank" href="img_mountains.jpg">
             <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Mountains" width="600" height="400">
            </a>
            <div class="desc">第四張圖</div>
             </div>
            </div>
            <div class="clearfix"></div>
            <div style="padding:6px;">
  </body>  
</html>


學(xué)び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { border: 2px solid black; border-radius: 14px; padding: 15px; } </style> </head> <body> <p>創(chuàng)建縮略圖。</p> <img src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="css3" width="400" height="300"> </body> </html>