CSS 图片

	img {    border-radius: 8px;}

	img {    border-radius: 50%;}

	img {    border: 1px solid #ddd;    
	border-radius: 4px;    padding: 5px;}
	<img src="paris.jpg"
	alt="Paris">

	a {    display: inline-block;    border: 1px solid #ddd;    
	border-radius: 4px;    padding: 5px;    
	transition: 0.3s;}a:hover {    box-shadow: 0 
	0 2px 1px rgba    (0, 140, 186, 0.5);}
	<a href="paris.jpg">  
	<img src="paris.jpg" alt="Paris"></a>

	img {    max-width: 100%;    height: 
	auto;}

	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);}img {width: 100%}
	div.container {    text-align: center;    
	padding: 10px 20px;}

    img {    -webkit-filter: grayscale(100%); /* Chrome, Safari, 
	Opera */   
  
    filter: grayscale(100%);}

	.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%;    
	}}

	// 获取模态窗口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;}
	// Get the <span> element that closes the modalvar span = 
	document.getElementsByClassName("close")[0];// When the user clicks 
	on <span> (x), close the modalspan.onclick = function() {     
	modal.style.display = "none";}