css 邊框顏色漸變的半圓


 

1.需求有這么個東西,個人不習慣背景圖片來解決,開始了css嘗試。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>邊框漸變的拱形</title>
 6         <style>
 7 
 8             .circle{  
 9                 width: 200px;  
10                 /*height: 200px;*/  
11                 line-height: 100px;  
12                 text-align: center;  
13                 margin: 100px;  
14                 /*background-color: red;*/  
15             }  
16             .semi-circle {  
17                 border-radius: 200px 200px 0 0 ;  
18                 height: 100px;  
19                 border: 20px solid red;
20                 border-bottom: 0;
21                 /*border-image: -moz-linear-gradient(green,blue);
22                 border-image: -webkit-linear-gradient(green,blue);
23                 border-image: linear-gradient(to right,green,blue) 30 30;*/
24             }  
25 
26         </style>
27     </head>
28     <body>    
29         <div class="circle semi-circle"></div>
30 
31     </body>
32 </html>

2.基於上圖 嘗試用背景漸變來解決,so border-image上了,(不要問為啥不用border-color),但是圓角沒有了,因為他們都是對border的設置。后從網上看到有偽類去做的背景漸變的按鈕。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>邊框漸變的拱形</title>
 6         <style>
 7 
 8             .border{
 9               position: relative;
10                 border: 4px solid transparent;
11                 border-radius: 16px;
12                 background: linear-gradient(orange, violet);
13                 background-clip: padding-box;
14                 padding: 10px;
15                 /* just to show box-shadow still works fine */
16                 box-shadow: 0 3px 9px black, inset 0 0 9px white;
17             }
18             .border::after{
19                 position: absolute;
20                 top: -4px; bottom: -4px;
21                 left: -4px; right: -4px;
22                 background: linear-gradient(red, blue);
23                 content: '';
24                 z-index: -1;
25                 border-radius: 16px;
26             }
27 
28         </style>
29     </head>
30     <body>    
31 
32         <div class="border"></div>    
33 
34     </body>
35 </html>

效果如下:

3.然后開始改造

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>邊框漸變的拱形</title>
 6         <style>
 7 
 8             .border1{
 9                 width: 200px;
10                 height: 200px;
11                 margin:100px auto;
12 
13               position: relative;
14                 border: 1px solid transparent;
15                 border-radius: 200px;
16                 background: white;
17                 background-clip: padding-box;
18                 padding: 10px;
19             }
20             .border1::after{
21 
22                 position: absolute;
23                 top: -40px; 
24                 bottom: -40px;
25                 left: -40px;
26                  right: -40px;
27                 background: linear-gradient(to right,red, blue);
28                 content: '';
29                 z-index: -1;
30                 border-radius: 200px;
31             }
32 
33         </style>
34     </head>
35     <body>    
36 
37         <div class="border1"></div>
38 
39     </body>
40 </html>

4.再次改造

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>邊框漸變的拱形</title>
 6         <style>
 7 
 8             .border2{
 9                 width: 200px;
10                 height: 100px;
11                 margin:100px auto;
12 
13               position: relative;
14                 border: 1px solid transparent;
15                 border-bottom: 0;
16                 border-radius: 200px 200px 0 0;
17                 background: white;
18                 background-clip: padding-box;
19                 padding: 10px;
20             }
21             .border2::after{
22 
23                 position: absolute;
24                 top: -40px; 
25                 bottom: 0px;
26                 left: -40px;
27                  right: -40px;
28                 background: linear-gradient(to right,red, blue);
29                 content: '';
30                 z-index: -1;
31                 border-radius: 200px 200px 0 0;
32             }
33         </style>
34     </head>
35     <body>    
36 
37         <div class="border2"></div>
38     </body>
39 </html>

最終達到想要的效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM