HTML怎么给图片添加边框效果-群英

您现在的位置是：群英 > 开发技术 > web开发

HTML怎么给图片添加边框效果

Admin发表于 2022-05-05 15:31:333889 次浏览

上一篇：如何编写html文件，基本操作步骤是什么

下一篇： JS中如何获取和处理PHP数组

这篇文章给大家分享的是“HTML怎么给图片添加边框效果”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“HTML怎么给图片添加边框效果”吧。

本篇文章给大家介绍怎么使用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：规定边框的颜色。

通过以上内容的阐述，相信大家对“HTML怎么给图片添加边框效果”已经有了进一步的了解，更多相关的问题，欢迎关注群英网络或到群英官网咨询客服。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： html图片边框

上一篇：如何编写html文件，基本操作步骤是什么

下一篇： JS中如何获取和处理PHP数组

相关信息推荐

PHP执行原理怎样理解？一文带你看懂

2021-11-30 17:50:08　

摘要：这篇文章我们来了解一下关于PHP执行原理的内容，对新手学习PHP会有一定的帮助，因此本文就给大家来介绍一下，下文有很详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

python中的copy和deepcopy函数使用有啥不同？

2021-11-20 17:46:03　

摘要：这篇文章给大家分享的是python中的copy()和deepcopy()函数的区别，从函数本身可以看出是和复制相关的函数，那么两者究竟区别在哪呢？文中示例对比，介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

react怎么防止无效重渲染，都有哪些方法

2022-04-29 12:00:57　

摘要：给大家带来一篇关于react阻止无效重渲染的方式总结的相关教程文章，内容涉及到react、无效重渲染、详解react阻止无效重渲染的多种方式等相关内容，更多关于详解react阻止无效重渲染的多种方式的内容希望能够帮助到大家。