CSS images
border-radius property
CSS3 rounded corners only need to set one property: border-radius (meaning " border radius"). You provide a value for this property to set the radii of all four corners at the same time. All legal CSS measurements can be used: em, px, percentage, etc.
Rounded corner images:
<!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>Oval images:
<!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>Use the border attribute to create thumbnails.
<!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>Responsive images
Responsive images will automatically adapt to screens of various sizes.
If you need to freely scale the image, and the enlarged size of the image is not larger than its original maximum value, you can use the following code:
<!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>Card-style image
<!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>##filter attribute
##Alpha Set transparency
Blur Set blur effect
Chroma Set specified color transparency
Dropshadow Set cast shadow
Flipv Vertical flip
Grayscale Set grayscale (reduce the color of the picture)
Light Set light projection
Shadow Set the shadow effect
Xray only displays the outline
<!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>Responsive picture album <!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>
##Picture Modal(modal)
Then, we use JavaScript to display the modal window. When we click on the image, the image will be displayed in the pop-up window:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<img id="myImg" src="https://img.php.cn/upload/course/000/000/008/58043ea4bc77e865.jpg" alt="Northern Lights, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// 獲取模態(tài)窗口
var modal = document.getElementById('myModal');
// 獲取圖片模態(tài)框，alt 屬性作為圖片彈出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 獲取 <span> 元素，設(shè)置關(guān)閉模態(tài)框按鈕
var span = document.getElementsByClassName("close")[0];
// 點擊 <span> 元素上的 (x), 關(guān)閉模態(tài)框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
