CSS设置图片边框

最新推荐文章于 2024-08-12 09:00:00 发布
最新推荐文章于 2024-08-12 09:00:00 发布
阅读量1.4w 收藏 27
点赞数 6
分类专栏： ————CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nangeali/article/details/52457045
版权

CSS设置图片边框


          HTML设置图片的边框

          HTML中通过<img>标记的border属性值，给图片添加边框，从而控制边框的粗细，当该值为0时，表示没有边框。

<span style="font-size:24px;"><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="0">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="2">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="3"></span>

          代码如上，可以看到所有边框都是黑色，而且风格非常单一，都是实线，仅仅是边框的粗细可以进行调整。

          CSS设置图片的边框

          CSS通过border属性，为图片设置各式各样的边框效果，border-style定义边框的样式，如虚线、实线或点划线等等，并且，在Dreamweaver中通过语法提示，可以轻松地获得各种边框样式的值。

          可以通过border-color定义边框的颜色，border-width定义边框的粗细。

<span style="font-size:24px;"><html>
	<head>
		<title>
			边框
		</title>
		<style>
			<!--
			img.test1{
			border-style:dotted;
			border-color:#FF9900;
			border-width:5px;
		}
			img.test2{
			border-style:dashed;
			border-color:blue;
			border-width:2px;
		}
			-->
		</style>
	</head>
	
	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
	</body>
</html></span>

          代码如上，第一个图片的效果为金黄色、5像素宽的点划线，第二个图片为蓝色、2像素宽的虚线。

          在CSS中可以分别设置4个边框的不同样式，分别设定为border-left、border-right、border-top、border-bottom的样式。

<span style="font-size:24px;"><html>
	<head>
		<title>
			分别设置4个边框
		</title>
		<style>
			<!--
			img{
			border-left-style:dotted;
			border-left-color:#FF9900;
			border-left-width:5px;
			border-right-style:dashed;
			border-right-clolr:#33CC33;
			border-right-width:2px;
			border-top-style:solid;
			border-top-color:#CC00FF;
			border-top-width:10xp;
			border-bottom-style:groove;
			border-bottom-color:#666666;
			border-bottom-width:15px;
		}
			-->
		</style>
	</head>
	
	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
	</body>
</html></span>

          代码如上，为图片的四个边框分别设置了不同的风格样式，这种方法在很多其他HTML元素中也经常使用。

          Border属性，还可以将各个值写到同一语句中，用空格分隔，这样可以大大的减少代码的长度。

<span style="font-size:24px;"><html>
	<head>
		<title>
			合并各CSS值
		</title>
		<style>
			<!--
			img.test1{
			border:5px double #FF00FF;
		}
			img.test2{
			border-right:5px double #FF00FF;
			border-left:8px solid #0033FF;
		}
			-->
		</style>
	</head>
	
	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
	</body>
</html></span>

          这样，可以加快网页的下载速度，而且更加清晰易读。

          此外，除了border属性可以将各个属性值写到一起，CSS的很多其他属性也可以进行类似的操作，例如，font，margin及padding等属性都可以统一。

<span style="font-size:24px;">p{
	font:italic bold 30px Arial,Helvetica,sans-serif;
	padding:0px 5px 0px 3px;
}
</span>

量变决定质变
关注
专栏目录
css图片外边框效果实现
10-24
css图片外边框效果实现 css图片外边框效果实现
纯CSS实现的漂亮的立体图片边框效果，阴影代码
12-12
图片立体边框效果 .image{padding:10px;border:1px solid #000;-moz-box-shadow:3px 3px 4px #000;-webkit-box-shadow:3px 3px 4px #000;box-shadow:3px 3px 4px #000;background:#fff;filter:progid:...
如何将图片做成内外边框HTML,css怎么设置图片的边框？
weixin_42509796的博客
06-02 1057
css设置图片边框的方法：可以直接通过css设置img标签的border属性来设置图片的边框。border是一个简写属性，可以在一个声明设置所有的边框属性。通过css设置img标签的border属性来设置图片的边框：HTML中文网img {border:5px solid red;}设置图片边框效果图：border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-wid...
前端必知必会-CSS边框属性border
qq_24018193的博客
08-12 1591
本文介绍了CSS边框属性border的使用，如有问题欢迎私信和评论。
html设计带图形的边框,css怎么设置图片的边框？
weixin_35971708的博客
06-04 1009
css设置图片边框的方法：可以直接通过css设置img标签的border属性来设置图片的边框。border是一个简写属性，可以在一个声明设置所有的边框属性。通过css设置img标签的border属性来设置图片的边框：HTML中文网img {border:5px solid red;}设置图片边框效果图：border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-wid...
CSS图片边框
z_z_Dragon的博客
06-14 940
用border的大小控制边框图片的大小。padding: 0;border: 125px solid transparent;background: linear-gradient(white, white),url(../images/border.jpg);background-size: cover;background-clip: padding-box, border-box;    b...
CSS中给边框设置图片方法
weixin_45929885的博客
09-11 335
CSS中给边框设置图片 CSS 目前并没有特别的功能实现这一方法 利用标签内外嵌套的间隙进行设计. html: <button class="btn"> <div class="span"> 洛阳处处是月明 </div> </button> sass: .btn{ padding: 0; border-radius: 5px; .span{
css3边框图片
weixin_30750335的博客
02-22 569
首先上图，边框图片与盒子区域【一一对应】 语法：【border-image: source slice / width / outset repeat;】 含意：【border-image: 来源 分割 / 图片显示宽度 / 图片在border外部显示 是否重复 ;】 （图片在border外部显示）会撑大盒子，很少采用，设置为0； （图片显示宽度）如果border宽度很小背...
CSS3圆角边框和边界图片效果实例
09-24
在这个示例中，展示了如何使用border-image来实现图片边框： ```css #round { -webkit-border-image: url(../images/border.png) 30 30 round; -o-border-image: url(../images/border.png) 30 30 round; border-...
css3图片边框border-image的用法
09-27
【CSS3图片边框border-image】是CSS3中引入的一项创新特性，允许开发者使用图像作为元素的边框，为网页设计增添了丰富的视觉效果。传统的边框样式如双线、虚线、圆点线等虽然简单易用，但相对单一。border-image属性...
CSS边框
Myzoneliver的博客
06-20 975
边框的基本属性 border-style常见的值有：solid实线，dashed虚线，dotted点状线。 注意：这三个值中border-style是必须的，如果只设置其他两个值不会显示边框。但只要设置了border-style，就会有边框，例如设置border: solid;chrome中width是0.6px，color等于字体颜色，默认是黑色。 TRBL与简写 四个方向可以独立设置，并具...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1988
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
HTML中给图片添加边框（全部图片）
L28256282572的博客
10-22 4526
大一初学css作业记录
如何在HTML网页里添加CSS边框,css如何设置边框？
weixin_35011928的博客
06-26 2448
在CSS中，可以设置border属性来设置边框。border是一个简写属性，可以在一个声明设置所有的边框属性。可以按照border-width、border-style、border-color顺序设置，也可以单独设置这几个属性。border属性的属性值：border-width： 规定边框的宽度。border-style：规定边框的样式。border-color：规定边框的颜色。示例：p {bo...
img图像添加边框
weixin_34254823的博客
03-28 2415
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS_给img元素添加边框
Mantinyu的博客
07-28 6039
缘由 在w3cschool上学习css相关的知识，小测验如下： 创建一个名为thick-green-border 类 将这个类应用在img元素中，为img元素周围添加一个10px的实心绿色边框 为类名为thick-green-border元素的顶部和左侧margin设置为40px ，底部设置为-10px，右侧设置为20px 为其设置顶部padding20px 问题 早晨写的时候，img的边框死...
Css3-边框图片设置
qq_51946037的博客
07-02 1130
与边框图片设置相关的属性有border-image-source：边框图片路径border-image-slice：边框图片分割方式border-image-repeat：对于分割图片的处理方式border-image-width：边框图片宽度，不设置时默认和边框宽度一致border-image-outset：边框图片相对border的向外偏移量。
CSS 3之设置图片边框
程序员小白的博客
06-17 8058
通过 中的 让图片是否具有边框； 示例如下： 通过 HTML 标记设置图片边框，其边框显示都是黑色，且风格单一，唯一能够设定的就是边框的粗细，不能对边框的样式进行设置； 使用 属性定义边框样式，即边框风格（点线式-dotted、破折式边框-dashed、直线式边框-solid、双线式边框-double等）；例子 1： 若需要单独定义边框一边的样式，可使用 设定上边框样式、 设定右边框样式、 设定下边框样式、 设定左边框样式；例子 2：...
CSS border-image（边框图片）
細水、長流√的专栏
03-01 9938
对于元素的边框我们除了可以使用《》一节中介绍的一些默认样式外，还可以通过 CSS3 中的 border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。
css设置图片圆角边框
最新发布
09-13
在CSS中，设置图片的圆角边框通常涉及到`border-radius`属性和`border`属性。以下是基本步骤： 1. **设置边框**: 如果你想添加边框，可以先设置`border-width`指定边框宽度，然后设置`border-style`为`solid`, `dashed`, `dotted`, 或者其他样式，最后选择你喜欢的颜色，如`border-color: red;`。 ```css img { border: 5px solid red; } ``` 2. **设置圆角**: 使用`border-radius`属性来设置边框的圆角，它可以接受一个值、两个值、四个值或百分比。例如，`radius: 10px`会使所有角都有10像素的圆角，`border-radius: 10px 20px`会让左上角和右下角有10像素的圆角，而右上角和左下角有20像素。 ```css img { border-radius: 50%; /* 全圆角 */ } ``` 为了给图片创建一个圆形边框，你可以将`border-radius`设置为图片宽高的50%。如果图片不是正方形，可能会产生椭圆形的效果。 ```css img.circle-border { border: 5px solid black; border-radius: 50%; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值