CSS画像
border-radius プロパティ
CSS3 の角の丸いプロパティは、border-radius (「境界線の半径」を意味します) 1 つのプロパティのみを設定する必要があります。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な 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>创建缩略图。</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>响应式图片</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 透明度を設定する
Blur ぼかし効果を設定する
Chroma 指定した色の透明度を設定する
Dropshadow キャストシャドウを設定する
Fliph 水平反転
Flipv 垂直反転
Glow 追加外側への光の効果オブジェクトの境界線
Grayscale グレースケールを設定します (画像の色を減らす)
Invert ネガティブ効果を設定します
Light 光の投影を設定します
Mask 透明フィルムを設定します
Shadow 影の効果を設定します
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>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
