clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
说明 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。 所有主流浏览器都支持 clip 属性。 但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
clip:rect(top,right,bottom,left) top:默认是0px，表示不裁剪上边的，数值为几，表示图片从上面裁剪掉几 right:默认是图片的宽度，数值为几，表示宽度剩几 bottom:默认是图片的高度，数值为几，表示高度剩几 left:默认是0px，表示不裁剪左边，数值为几，表示图片从左边裁剪掉几
裁剪一张图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>一个有多种颜色的圆形</title> <style> img { display: block; width: 400px; height: 400px; position: absolute; /* clip: rect(0px 200px 200px 0px); */ } </style> </head> <body> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3608155120,1630233151&fm=26&gp=0.jpg" alt="" /> </body> </html>原图是网上随便找的一张图 裁剪后的图片是
例如使用css写一个左右颜色不一样的圆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>一个左右颜色不一样的圆</title> <style> .circle { width: 200px; height: 200px; border-radius: 50%; position: absolute; } .c1 { background-color: yellow; clip: rect(0px 100px 200px 0px); } .c2 { background-color: #ff0095; clip: rect(0px 200px 200px 100px); } </style> </head> <body> <div class="circle c1"></div> <div class="circle c2"></div> </body> </html>效果如下图所示： 还可以写更多颜色的圆，下面是四色的圆。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>一个有多种颜色的圆形</title> <style> .circle { width: 200px; height: 200px; border-radius: 50%; position: absolute; } .c1 { background-color: yellow; clip: rect(0px 100px 200px 0px); } .c2 { background-color: #ff0095; clip: rect(0px 200px 200px 100px); } .c3 { background-color: #06b906; clip: rect(100px 200px 200px 0px); } .c4 { background-color: #002280; clip: rect(100px 200px 200px 100px); } </style> </head> <body> <div class="circle c1"></div> <div class="circle c2"></div> <div class="circle c3"></div> <div class="circle c4"></div> </body> </html>效果如下：
