css设置图片位置并设置边框宽度

2025-10-18 22:44:25

1、创建标签

<div id="img">

//图片标签

<img src="jdjfd.jpg" />

</div>

css设置图片位置并设置边框宽度

2、添加css样式 可以看到位置改变了 这里用的是外边距 也可以用内边距 就不演示了 这里我们先改变左边位置

<div id="img">

<img src="jdjfd.jpg" style="margin-left:50px ;" />

</div>

css设置图片位置并设置边框宽度

3、改变上方位置 可以看到现在位置已经发生变化

<div id="img">

<img src="jdjfd.jpg" style="margin-left:50px ;" />

</div>

css设置图片位置并设置边框宽度

4、现在添加边框宽度 可以看见宽度已经发生变化 为红色

<div id="img">

<img src="jdjfd.jpg" style="margin-left:50px ;margin-top: 50px;border: 1px solid red;" />

</div>

css设置图片位置并设置边框宽度

5、如果需要加粗只需要改变1px的大小 数字越大 边框宽度越宽

<div id="img">

<img src="jdjfd.jpg" style="margin-left:50px ;margin-top: 50px;border: 20px solid red;" />

</div>

css设置图片位置并设置边框宽度

6、以下为完整代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<div id="img">

<img src="jdjfd.jpg" style="margin-left:50px ;margin-top: 50px;border: 20px solid red;" />

</div>

</body>

</html>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢