css tricks

1. Input text content replacement

-webkit-text-security: Affect only those fields that are not type=password by replacing characters with shapes
1. Available values: none (none), circle (circle), disc (circle), square (square)
2. code:
```
<style>
	input {
          
          
		-webkit-text-security: circle;
	}
</style>
<input type="text" name="name" id="name" />
```
3. result:

2. Use currentColor

currentColor can be said to be a variable of css, which will be parsed as a value of clolor, so below we can use currentColor for the same value as color
```
.text{
      
      
    color: #3397ff;
    border: 1px solid currentColor;
}
```

3. Use inherit

-inherit will inherit the corresponding value of the parent element
css .box{ font-size: 20px; color: #3397ff; background: #333333; border: 1px solid currentColor; .text{ line-height: 2em; margin-top: 2em; width: 20em; color:inherit; background:inherit; border:inherit; } }

4.css text gradient animation

Set gradient background
Usewebkit-background-clip: text the text of the div as the cropping area to crop outward
make -webkit-text-fill-colortext transparent

<style>
	.list {
      
      
        background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-background-size: 200% 100%;
        animation: bgp 5s infinite linear;
    }
	@keyframes bgp {
      
      
		0%  {
      
       background-position: 0 0;}
		100% {
      
       background-position: -100% 0;}
	}
</style>
	<div class="list">
		<span class="list-item">今天又是元气满满的一天</span>
		<span class="list-item">让眼睛休息一下把</span>
		<span class="list-item">小姐姐今天好漂漂哟~</span>
		<span class="list-item">明天要放假了真开心</span>
		<span class="list-item">每天进步一点点</span>
	</div>

5. Set the reflection through box-reflect

By -webkit-box-reflectsetting the reflection and adding a reflection gradient
details

<style>
.reflect{
      
      
	width:950px;
	margin:0 auto;
	-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
	text-transform:uppercase;
	}
</style>
</head>
<body>
<div class="reflect">你看到倒影了么？</div>
</body>

6. Bokeh black

 .text{
    
    
	fade-out(black, 0.95) /* black的变种，1是全黑，0是全透明无色 */
 }

7. Pseudo class clear float

.clearfix:after{
    
    
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
    
    
     zoom: 1; /* IE 兼容*/
 }

8.:checked modify the style of radio and checkbox

<style>
	.tabList{
      
      
		position: relative;
		display: inline-block;
	}
	input[type='radio']{
      
      
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		opacity: 0;
		z-index:9;
	}
	.tabDiv{
      
      
		width:100px;
		height:40px;
		position: relative;
		z-index:1;
		border:1px solid;
		line-height:40px;
    	text-align: center;
	}
	input[type='radio']:checked + .tabDiv{
      
      
		background: red;
		border:1px solid red;
	}

</style>
<body>
	<div class='tabList'>
		<input type='radio' name='tab' />
		<div class='tabDiv'>one</div>
	</div>
	<div class='tabList'>
		<input type='radio' name='tab' />
		<div class='tabDiv'>two</div>
	</div>
</body>