首页 > 代码库 > 纯CSS实现图片
纯CSS实现图片
在Web开发中。通过CSS代码也能够实现一些简单的图片，当然，假设你有耐心，也能够实现较为复杂的图片噢。
那么请问为什么有图片不去用而须要用CSS来实现呢？一是由于性能的原因，图片带给server和client的压力比几行CSS代码要大得多。二是由于没有必要。有些简单的效果利用CSS就能够直接完毕了，为什么还须要麻烦地引入图片呢？
比方大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。
效果例如以下：
事实上现代码例如以下：
<ul>
<li class="dropdown">dropdown</li>
</ul>
.dropdown:after {
position:absolute;
width:0;
height:0;
margin-top:8px;
margin-left:5px;
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #000000;
content:‘‘;
}
能够看到，三角形实现的原理事实上就是利用了border-left,border-right以及border-top。
通过将左右边框设为透明状，来显示三角形的边界区域。
代码位置：http://runjs.cn/code/o3miehqr
事实上这个图片是通过CSS代码来实现的。代码例如以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#rectangle {
position: relative;
background:#FFFFFF;
border:10px solid #999999;
width:200px;
height:120px;
}
#circle {
position: absolute;
background-color: #999999;
width:40px;
height: 40px;
border-radius: 50%;
margin-left:140px;
margin-top:20px;
}
#triangle1 {
position:absolute;
width:0;
height:0;
border-left:40px solid transparent;
border-right:70px solid transparent;
border-bottom:80px solid #999;
margin-top:30px;
margin-left:10px;
}
#triangle2 {
position:absolute;
width:0;
height:0;
border-left: 30px solid transparent;
border-right: 60px solid transparent;
border-bottom:60px solid #999;
margin-top:50px;
margin-left: 80px;
}
</style>
</head>
<body>
<div id="rectangle">
<span id="circle"></span>
<span id="triangle1"></span>
<span id="triangle2"></span>
</div>
</body>
</html>
代码位置：http://runjs.cn/code/zj0bbjpw其原理就是构建三角形和圆形。利用了border和border-radius。
所以说CSS实现图片在应用中还是挺广泛的。
纯CSS实现图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。