一招教你使用html给图片添加边框效果（代码详解）-html教程-PHP中文网

首页

web前端

html教程

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

奋力向前

Aug 19, 2021 pm 06:39 PM

csshtml

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

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

图片添加边框效果的方法

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

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

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

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

代码示例

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img src="787.jpg">
</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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract