登录  /  注册

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

奋力向前
发布: 2021-08-19 18:39:28
原创
20281人浏览过

之前的文章《手把手教你使用css制作一个圆角按钮效果(代码详解)》中,给大家介绍了怎么使用css制作一个圆角按钮效果。下面本篇文章给大家介绍怎么使用html给图片添加边框效果,我们一起看看怎么做

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

图片添加边框效果的方法

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

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

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

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

代码示例

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="一招教你使用html给图片添加边框效果(代码详解)" >
</div>
登录后复制

代码效果

微信截图_20210819181024.jpg

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

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

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

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;
登录后复制

微信截图_20210819181454.jpg

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

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

div img{
border:dashed 5px blue;
}
登录后复制

微信截图_20210819181454.jpg

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

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;
}
登录后复制

微信截图_20210819182433.jpg

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
登录后复制

微信截图_20210819190628.jpg

最终效果了。

笔记:border简写属性的构成

  • border-width:规定边框的宽度;

  • border-style:规定边框的样式;

  • border-color:规定边框的颜色。

推荐学习:Html视频教程

以上就是一招教你使用html给图片添加边框效果(代码详解)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号