<form id="dlljd"></form>
        

        <address id="dlljd"><address id="dlljd"><listing id="dlljd"></listing></address></address>
        <em id="dlljd"><form id="dlljd"></form></em>
          
<address id="dlljd"></address>
            <noframes id="dlljd">
              


              
	
              
		
		聯系我們 - 廣告服務 - 聯系電話：
		
	
              

              

              
	
	
	
              
	
              

              


               您的當前位置： > 關注 >  > 正文
              


              
  
              
    
              
      
              【偽元素】CSS帆布Canvas的創建方案
              
      
               來源：CSDN   時間：2023-01-12 10:21:06 
        
      
              
	  
      
	  
              
        
              CSS

              【資料圖】
              通過使用偽元素,您可以創建形狀的兩側,從而獲得所需的輸出.
              所有瀏覽器都支持此解決方案.
              div {
              position: relative;
              width: 178px;
              height: 100px;
              }
              div:before,
              div:after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 60px;
              height: 60px;
              border: 10px solid black;
              border-radius: 50px 50px 0 50px;
              transform: rotate(-45deg);
              }
              div:after {
              left: auto;
              right: 0;
              border-radius: 50px 50px 50px 0;
              transform: rotate(45deg);
              }
              如果你想要它更加勻稱,對邊界半徑規則的一些修改確實有助于給它更多的形狀.
              div {
              position: relative;
              width: 178px;
              height: 100px;
              }
              div:before,
              div:after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 60px;
              height: 60px;
              border: 10px solid black;
              border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
              transform: rotate(45deg);
              }
              div:after {
              left: auto;
              right: 0;
              transform: rotate(-135deg);
              }
              SVG
              SVG代表可伸縮矢量圖形. Web瀏覽器將其視為圖像,但您可以在SVG中添加文本和普通HTML元素.
              所有瀏覽器都支持它,如下所示：CanIUse
              帆布
              Canvas類似于SVG,但使用柵格(基于像素)而不是矢量來創建形狀.
              Canvas的瀏覽器支持是quite good.
              var shape = document.getElementById("infinity").getContext("2d");
              shape.lineWidth = 6;
              shape.strokeStyle = "#333";
              shape.beginPath();
              shape.moveTo(100, 100);
              shape.bezierCurveTo(200, 0, 200, 200, 100, 100);
              shape.bezierCurveTo(0, 0, 0, 200, 100, 100);
              shape.closePath();
              shape.stroke();
              HTML
              從近似重復的答案中可以看出,這是所有HTML替代品的積累.
              我只為規范添加了這個,并向用戶顯示HTML實體可以實現形狀.
              p {
              font-size: 2em;
              }
              ∞
              ∞
              ∞
              ∞
                    
              
      
               責任編輯： 
              
      
              
        
                
			        
              
      
              
	  
              
	  
		
              標簽：
		 
		
              
		
		
	  
              
    
      
      
      
              
        
               相關推薦： 
              
        
                
		        
              
      
              
	  
	  
      
              
        
               精彩放送： 
              
        
      
              
    
              
  
              
  
                      

                
    
    
    
  
    
              
      
               新聞聚焦 
              
      
    
              
	
  
              
  
               
              

              


               
  
Top


中文字幕在线观看亚洲日韩