atribut jejari sempadan
Sudut bulat CSS3 hanya perlu menetapkan satu atribut: jejari sempadan (bermaksud " jejari sempadan"). Anda memberikan nilai untuk sifat ini untuk menetapkan jejari keempat-empat penjuru pada masa yang sama. Semua ukuran CSS undang-undang boleh digunakan: em, px, peratusan, dsb.
Imej bulat:
<!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>Imej bujur:
<!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>Gunakan atribut sempadan untuk mencipta lakaran kecil.
<!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>Imej responsif
Imej responsif akan menyesuaikan diri secara automatik kepada pelbagai saiz skrin.
Jika anda perlu menskalakan imej secara bebas, dan saiz imej yang diperbesarkan tidak lebih besar daripada nilai maksimum asalnya, anda boleh menggunakan kod berikut:
<!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>Kad- imej gaya
<!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>atribut penapis
Ketelusan Set Alpha
Kesan kabur Set Kabur
Ketelusan warna yang ditetapkan Set Kroma
Bayang tuang Set Pembayang Titis
Fliph Fliph Mendatar
Flipv Flip menegak
Objek bercahaya Tambahkan kesan cahaya pada sempadan luar
Skala kelabu Set skala kelabu (kurangkan warna gambar)
Set Terbalikkan kesan negatif
Unjuran cahaya Set Cahaya
Topeng Tetapkan filem lutsinar
Bayang-bayang menetapkan kesan bayang-bayang
Gelombang menggunakan riak sinus untuk mengganggu gambar
Xray hanya memaparkan garis besar
<!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>Album gambar responsif
<!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 Gambar (modal)
Contoh ini menunjukkan Cara menggabungkan CSS dan JavaScript untuk memaparkan imej bersama-sama.
Pertama, kami menggunakan CSS untuk mencipta tetingkap modal (dialog), yang disembunyikan secara lalai.
Kemudian, kami menggunakan JavaScript untuk memaparkan tetingkap modal Apabila kami mengklik pada imej, imej akan dipaparkan dalam tetingkap pop timbul:
<!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>