Rumah > hujung hadapan web > tutorial css > css中如何实现border边框颜色渐变代码详解

css中如何实现border边框颜色渐变代码详解

伊谢尔伦
Lepaskan: 2017-07-19 11:06:19
asal
10799 orang telah melayarinya

在css中,如果一条边框线有n像素的宽度,那么就可以对其设置n种不同的颜色。

      在代码中,我们可以定义一条宽为7px的实线:border: 7px solid #C8C8C8;(不要在意此处设置的颜色,在firefox中后面的代码中会被新设置的颜色覆盖掉)

      如果对border中四边的边框同时设置渐变的颜色,如下述代码所示:

<html>  
<head> 
       <style>
        p{
                 height: 100px;
                 width: 100px;
                 border: 7px solid red;
                 border-color: red green yellow black;
             }    
         </style>
</head>
<body>
    <p></p>
</body>
</html>
Salin selepas log masuk

运行html文件后,我们得到的效果如下:

代码会将我们设置的颜色自动分配给 top、right、bottom、left,以顺时针的形式分配。如果我们只设置3个颜色,那么结果显而易见,直接分配给top、right、bottom这三个方向的边框了。因此,为了让代码知道我们不是要按此规则设置边框颜色,应该分别对每个方向的边框设置渐变颜色,其代码如下:

 <html>  
 <head> 
       <style>
                p{
                       height: 100px;
                       width: 100px;
                       background: #E8F5FC;
                       border: 7px solid red;
                      -moz-border-top-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-right-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-bottom-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-left-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                   }
      </style>
</head>
    <body>
            <p></p>
    </body>
</html>
Salin selepas log masuk

        其执行结果如下:

             

      需要注意的是,border的边框颜色设置是从外向内的,所以第一个颜色编码是最外层颜色,而最后一个颜色编码是最内层的颜色。

 

Atas ialah kandungan terperinci css中如何实现border边框颜色渐变代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan