一招教你使用html给图片添加边框效果（代码详解）-偶像资源网

图片添加边框效果的方法

1、打开HTML代码软件，建立一个代码，添加图片效果有两种方法

一方法：图片添加描边或者是给外面的盒子。

二方法：就是直接在img图片标签。

两项选一，我用是二方法。

代码示例

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img src="787.jpg">
</div>

代码效果

代码效果出来了，发现没有边框了。

2、图片添加边框设置，样式：border-style，样式有solid 实心的、dashed虚线等样式，颜色使用border-color来设置，粗细使用border-width来设置。

注：边框样式border-style，这重要的，不然其它属性全部失效。

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

代码效果出来，这样就是一个边框颜色后，现在的边框是一个虚线组成的

3、将这三个属性组合成一个属性，就如border:dashed 5px blue；这样效果还是一样的，很方便。

div img{
border:dashed 5px blue;
}

代码效果出来了还是一样，因为三个属性组合成一个属性，接着，我们只选择对图片的一边添加效果。

4、左边：border-left，右侧：border-right，上面：border-top，下面：border-left按照这样的设置可以单独对任何一边设置。

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

5、代码效果出来了，差不多这个状态，边框宽度能不能放大？通过div的border属性控制边框颜色，设置border的宽度为20px，颜色为蓝色

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

最终效果了。

笔记：border简写属性的构成

border-width：规定边框的宽度；
border-style：规定边框的样式；
border-color：规定边框的颜色。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Html/CSS
# 编程开发 # CSS

一招教你使用html给图片添加边框效果（代码详解）

图片添加边框效果的方法

请登录后发表评论