CSS之提示框实现

阅读更多

效果图：



注意以下要点：

1、提示框的箭头效果，且箭头随位置变动。

2、提示框的关闭按钮，且提示框内容高度随意。

3、阴影效果


测试网址：
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow

代码：

  
  
  
	
    
    

  
  
  
Paragraph A
Paragraph B
Paragraph C
Paragraph D
Paragraph E
Paragraph F
Paragraph G

 
    
 
    	

        	Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
        
    	

    
 


	Last Name: 
	
    	i
        

        	
  
 			

        
    









Paragraph A
Paragraph B
Paragraph C
Paragraph D
Paragraph E
Paragraph F
Paragraph G

 
    
 
    	

        	Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
        
    	

    
 


	Longer - Last Name: 
	
    	i
        

        	
  
 			

        
    





  
 

转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2387980









-

• 
• 大小: 55.4 KB

• 查看图片附件