CSS 图片
border-radius属性
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的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>使用 border 属性来创建缩略图。
<!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>filter属性
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>响应式图片相册
<!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>图片 Modal(模态)
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>
// 获取模态窗口
var modal = document.getElementById('myModal');
// 获取图片模态框，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> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];
// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
