HTML用CSS设置框线的颜色详解

2024-10-11 22:19:27

1、首先我来设置框线为实线,这个必须先设置不然就会使用默认的框线none,就是没有框线的意思了。首先我们来设置上下左右四个框线都为红色,具体实线代码如下:<html> <head媪青怍牙> <title>CSS框线设置</title> <style type="text/css"> .imgduibi{ border-style:solid; border-color:red; } </style> </head> <body> <img src="2.jpg" /> &nbsp;&nbsp;&nbsp;&nbsp; <img class="imgduibi" src="2.jpg" /> </body></html>可以看到下图的图二这个框线变成了红色和第一个没有框线的默认做了对比。

HTML用CSS设置框线的颜色详解

3、还可以使用上为红色,左右为蓝色,下为绿色这个组合设计,具体代码如下:<html> <head> 媪青怍牙<title>CSS框线设置</title> <style type="text/css"> .imgduibi{ border-style:solid; border-color:red blue green; } </style> </head> <body> <img src="2.jpg" /> &nbsp;&nbsp;&nbsp;&nbsp; <img class="imgduibi" src="2.jpg" /> </body></html>可以看到下图的具体效果,用三种不同的颜色来设计框线,实线了上 左右 和下这个三个不同颜色的框线。

HTML用CSS设置框线的颜色详解

5、除了使用英文来设置颜色还可以使用十六进制来设置,具体的代码如下:<html> <head> <title>CSS框线设置</title> <style type="text/css"> .imgduibi{ border-style:solid; border-color:#ff0000; } </style> </head> <body> <img src="2.jpg" /> &nbsp;&nbsp;&nbsp;&nbsp; <img class="imgduibi" src="2.jpg" /> </body></html>用#ff0000;这个值来设置框线,如下图框线成为了红色的。

HTML用CSS设置框线的颜色详解
猜你喜欢