053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css图片样式解析-图片边框

时间:2017-08-15

案例如下:

 

以下为引用的内容:

<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
 border-style:dotted; /* 点画线 */
 border-color:#FF9900; /* 边框颜色 */
 border-width:5px;  /* 边框粗细 */
}
img.test2{
 border-style:dashed; /* 虚线 */
 border-color:blue;  /* 边框颜色 */
 border-width:2px;  /* 边框粗细 */
}
-->
</style>
   </head>
<body>
 <img class="lazy" data-original="banana.jpg" class="test1">
 <img class="lazy" data-original="banana.jpg" class="test2">
</body>
</html>

 

控制边框的属性有:

 border-style:dotted; /* 点画线 */
 border-color:#FF9900; /* 边框颜色 */
 border-width:5px;  /* 边框粗细 */

 border-style:dashed; /* 虚线 */
 border-color:blue;  /* 边框颜色 */
 border-width:2px;  /* 边框粗细 */

同样我们可以对边框样式用一句来定义:#img{border:1px solid #000000;}

css还以对上下左右边框分别定义:#img{border-left:1px solid #000000;border-top:1px solid #000000;}

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP