程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Java在Linux下 不克不及處置圖形的處理方法 分享

Java在Linux下 不克不及處置圖形的處理方法 分享

編輯:關於JAVA

Java在Linux下 不克不及處置圖形的處理方法 分享。本站提示廣大學習愛好者:(Java在Linux下 不克不及處置圖形的處理方法 分享)文章只能為提供參考,不一定能成為您想要的結果。以下是Java在Linux下 不克不及處置圖形的處理方法 分享正文


 我先說若何制造三角形吧,信任年夜家在日常平凡逛網站的時刻都邑看到一些導航欄中的三角形吧,好比說:

 網易首頁的頭部菜單欄中,也會有如許的三角形

當鼠標經由時,三角形會垂直翻轉,以下

如今我分享制造三角形的做法,重要是應用邊框做成的

起首,四個三角形歸並在一路的正方形,也就是正方形的四條邊框構成的四個三角形

源代碼:

    
  • <!DOCTYPE html>  
  • <html lang="en">  
  • <head>  
  •     <meta charset="UTF-8">  
  •     <title>正方形</title>  
  •     <style>  
  •     .div{   
  •         width: 0px;   
  •         height: 0px;   
  •         border-top:50px solid red;         
  •         border-bottom:50px solid green;   
  •         border-left:50px solid yellow;   
  •         border-right:50px solid blue;   
  •         /*留意:四條邊框的寬度必需雷同!*/   
  • }   
  •     </style>  
  • </head>  
  • <body>  
  •     <div class="div"></div>  
  • </body>  
  • </html>  
  • 後果以下:

    如今,要把個中一個三角形掏出來,其實就是要把其他的隱蔽失落

    源代碼:

        
  • <!DOCTYPE html>  
  • <html lang="en">  
  • <head>  
  •     <meta charset="UTF-8">  
  •     <title>制造三角形箭頭</title>  
  •     <style>  
  •     .arrow{   
  •         width:0;   
  •         height:0;   
  •         border-top:50px solid #000;     /*設置並顯示上邊框*/   
  •         border-bottom:none;             /*不設置下邊框*/   
  •         border-left:50px solid transparent;     /*設置但隱蔽右邊框*/   
  •         border-right:50px solid transparent;    /*設置但隱蔽左邊框*/   
  •     }   
  •     .arrow:hover{   
  •         border-top:none;                  /*鼠標經由時,不設置上邊框*/   
  •         border-bottom:50px solid #000;    /*鼠標經由時,設置並顯示下邊框*/   
  •     }   
  •     </style>  
  • </head>  
  • <body>  
  •     <div class="arrow"></div>  
  • </body>  
  • </html>  
  • 後果以下:

    接上去,我分享一種按鈕的做法

    重要是應用邊框款式、盒子暗影和偽類後果來完成的

    源代碼:

        
  • <!DOCTYPE html>  
  • <html lang="en">  
  • <head>  
  •     <meta charset="UTF-8">  
  •     <title>CSS制造按鈕</title>  
  •     <style type="text/css">  
  •     .btn{   
  •         width:100px;   
  •         height:100px;   
  •         background:#ccc;   
  •         border-radius:50%;   
  •         box-shadow:5px 5px 10px #000;   /*設置外暗影*/   
  •     }   
  •     .btn:active{   
  •         background:#bbb;   
  •         box-shadow:5px 5px 10px #000 inset;    /*設置內暗影*/   
  •     }   
  •     .btn div{   
  •         font-size:30px;   
  •         font-family:"微軟雅黑";   
  •         color:blue;   
  •         float:left;   
  •         margin-top:28px;   
  •         margin-left:20px;   
  •     }   
  •     </style>  
  • </head>  
  • <body>  
  •     <div class="btn">  
  •         <a href="###">  
  •             <div>開端</div>  
  •         </a>  
  •     </div>  
  • </body>  
  • </html>  
  • 後果:

    後果能夠不太雅觀,有待晉升,年夜家可以施展本身的想象做出更好的後果,祝年夜家進修高興!

    以上這篇用CSS制造三角形和按鈕的簡略實例就是小編分享給年夜家的全體內容了,願望能給年夜家一個參考,也願望年夜家多多支撐。

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved