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

CSS ???

border-radius ??

CSS3 ?? ????? border-radius("??? ??"? ??) ?? ??? ???? ???. ? ???? ??? ??? ????? ? ??? ?? ?????. em, px, ??? ? ?? ???? CSS ??? ??? ? ????.

?? ???: 

<!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 ??? ??

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>


Picture Modal(??)

? ???? CSS? ??? ????? JavaScript ??.

?? CSS? ???? ????? ??? ?? ?? ?(?? ??)? ????.

?? ?? JavaScript? ???? ?? ?? ???? ???? ???? ???? ?? ?? ?????. 

<!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];
// 點(diǎn)擊 <span> 元素上的 (x), 關(guān)閉模態(tài)框
span.onclick = function() { 
    modal.style.display = "none";
}
</script>
</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>