CSS3 new Features Application (1?? ) Font typography

First, insert line break

• ~: An element of the specified type after the sibling element, such as; ELM1 ~ elm2, all elm2 elements after elm1, and ELM1 and elm2 are all in the same parent element.
• +: The sibling element that represents the sibling element.
• \a: A blank line break
• Solution:
  • Add a blank line break before the child elements on the dt adjacent to DT
  • Add a comma between the adjacent DD and DD
• Example code:

Zebra stripes in the line of text
 
 

  
  
 
   
The background size is twice times higher than the row height.
 
   
Note EM units
 
   
White-space: Sets or retrieves the handling of spaces within an object 
    
 
     
Normal: Default processing mode
 
     
Pre: Display preformatted text in equal-width font, blank characters are reserved by the browser
 
     
NoWrap: Text does not wrap until <br> tag is encountered
 
     
Pre-wrap: Display pre-formatted text in equal-width font, blank characters are reserved by the browser, text wraps
 
     
Pre-line: Keep line breaks, merge white space characters
 
    
 
   
Example code:
 
  
 
 
Third, adjust the width of the tab
 
  

  
   
 
    
Note whether the IDE applies tab replacement for space and must be turned off.
 
    
Use Tab-size to specify the size of the tab
 
    
Sample code
 
   
 
  
Iv. Custom Underline
 
   

  
    
 
     
Linear-gradient angle, default is 180deg
 
     
Text-shadow achieve shadow effect, make left and right shadow offset
 
     
There is a compatibility issue and the Chrome50 version does not appear underlined
 
     
Example code:
 
    
 
   
 
Five, the actual text effect
 
    

  
     
 
      
Text-shadow implementation of the effect can not be degraded, if the browser does not support the invisible, can be implemented with filter, but the support is better (but can degenerate style)
 
      
Text-shadow set multiple values and offset by increment rule, you can create a stereo effect
 
      
Letterpress text 
       
 
        
The font is too small text-shadow the effect of the property is unacceptable
 
        
Example code:
 
       
 
     
 
    

 
     

  
      
 
       
Additional effect Sample code:
 
      
 
     
VI. Custom check box
 
      

  
       
 
        
System comes with a check box to beautify
 
        
 
         
Using CSS3 to provide: checked pseudo class selector implementation
 
         
width, height, alignment and other settings units are best to use EM, so that the buttons become more flexible
 
         
Example code:
 
        
 
       
 
      

 
       

  
        
 
         
Implementation of switch buttons
 
         
 
          
Pseudo class selector + decorated label element implementation
 
          
Example code:
 
         
 
        
 
       
CSS3 new Features Application (1?? ) Font typography