CSS3 边框圆角
border-image 设置所有边框图像的速记属性。 border-radius 一个用于设置所有四个边框 半径属性的速记属性 box-shadow 附加一个或多个下拉框的阴影
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框圆角</title> <link rel="stylesheet" href="border.css"> </head> <body> <!-- body大容器 --> <!-- 第一张图片 --> <div class="cointer"> <div class="cointer1"> <div class="cointer2"> <img src="imgs/item_1.jpg" alt=""> <a href="" class="logo"> <img src="imgs/logo_1.jpg" alt=""> </a> <div class="cointer3"></div> </div> </div> <!-- 第二张图片 --> <div class="cointer1"> <div class="cointer2"> <img src="imgs/item_2.jpg" alt=""> <a href="" class="logo"> <img src="imgs/logo_2.jpg" alt=""> </a> <div class="cointer3"></div> </div> </div> <!-- 第三张图片 --> <div class="cointer1"> <div class="cointer2"> <img src="imgs/item_3.jpg" alt=""> <a href="" class="logo"> <img src="imgs/logo_3.jpg" alt=""> </a> <div class="cointer3"></div> </div> </div> <!-- 第四张图片 --> <div class="cointer1"> <div class="cointer2"> <img src="imgs/item_4.jpg" alt=""> <a href="" class="logo"> <img src="imgs/logo_4.jpg" alt=""> </a> <div class="cointer3"></div> </div> </div> <!-- 第二、五张图片 --> <div class="cointer1"> <div class="cointer2"> <img src="imgs/item_5.jpg" alt=""> <a href="" class="logo"> <img src="imgs/logo_5.jpg" alt=""> </a> <div class="cointer3"></div> </div> </div> </div> </body> </html>css样式：
*{ margin: 0; padding: 0; background-color: #F7F7F7; } img{ display: block; } .cointer{ width: 1500px; height: 500px; padding-left: 20px; /* border: 1px solid red; */ margin: 100px auto; } .cointer1{ width: 250px; height: 300px; /* border: 1px solid gold; */ float: left; margin: 50px 23px; box-shadow: 0 2px 0 black; } .cointer3{ width: 250px; height: 150px; background-color: #ffffff; } .cointer1 .cointer2{ position: relative; height: 150px; } .cointer1 .cointer2>img{ width: 250px; height: 150px; } .cointer1 .logo{ width: 80px; height: 80px; border: 4px solid #ffffff; position: absolute; left: 50%; margin-left: -44px; bottom: -44px; border-radius: 50px; overflow: hidden; }效果图如下
