您的位置：首页 > Web前端 > CSS

css3 边框阴影效果

2016-11-28 16:56 197 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.box1{
width:300px;
height:300px;
padding:20px;
position:relative;
margin:0 auto;
border: 1px solid #00c1de;
box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
}
div.box2{
width:300px;
height:300px;
padding:20px;
position:relative;
border:1px solid #ccc;
margin:0 auto;
-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.3) !important;
-moz-box-shadow:0 5px 20px rgba(0,0,0,0.3) !important;
box-shadow:0 5px 20px rgba(0,0,0,0.3) !important
}

div img{
width:100%;
}
</style>
</head>
<body>
<div class="box1">
<img src="https://img.alicdn.com/tps/TB1ARGlNVXXXXX0XXXXXXXXXXXX-1600-880.png" alt="">
</div>

<div class="box2">
<img src="https://img.alicdn.com/tps/TB1ARGlNVXXXXX0XXXXXXXXXXXX-1600-880.png" alt="">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航