日度归档:2020年5月9日

css 如何将html元素中的文字变成“空心字”呢?


摘要:
下文讲述css实现空心字的示例分享,如下所示:

实现思路:
    1.将color:white属性将字体颜色设置为白色
    2.使用text-shadow属性将字体的阴影设置为黑色
    采用以上两种方式,可模拟出空心字的效果。

例:
css实现空心字的示例分享

<meta charset='utf-8' />
<style>
 div { 
     background: green;
     color: white;
	 font-size:36px;
	 padding:18px;
     text-shadow: 1px 1px black, -1px -1px black,
                  1px -1px black, -1px 1px black;	
}
</style>
<p>
 maomao365.com <br />
 css 空心字的示例分享
</p>
<hr />
 <div>
 猫猫教程--
   这些字都会变成空心字 
</div>
css实现空心字的示例分享

css实现空心字的示例分享

css 如何实现一个“斑马条纹”呢?


摘要:
下文讲述css实现一个行交替颜色的示例分享,如下所示:

实现思路:
    使用linear-gradient属性实现一个行渐变达到交替颜色

例:

<meta charset='utf-8' />
<style>
 pre { 
	padding: .5em;
	line-height: 2em;
	background: hsl(20, 50%, 95%);
	background-image: linear-gradient(
	                  rgba(100,0,0,.1) 50%, transparent 0);
	background-size: auto 4em;
	background-origin: content-box;
	font-family: Consolas, Monaco, monospace;	
}
</style>
<p>
 maomao365.com <br />
 css 斑马纹背景示例分享
</p>
<hr />
 <pre>
 猫猫教程--
   css示例分享
   div中交替颜色示例分享
</pre>
css实现div中交替颜色的示例分享

css实现div中交替颜色的示例分享

如何使用css快速禁用表单下所有输入框元素呢?


摘要:
下文讲述使用css禁用(disabled)表单下元素的方法分享,如下所示:

实现思路:
    1.将form表单下所有元素设置属性pointer-events:none,元素鼠标事件失效
	2.使用::before伪类创建一个遮罩层

例:
css禁用表单所有元素的示例分享

<meta charset='utf-8' />
<style>
  form {
  pointer-events: none;
}
form::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(0,0,0,.001);
}
</style>
<p>
 maomao365.com <br />
 css为form表单模拟disabled属性示例分享
</p>
<hr />
<form>
 name:  <input type="text" /> <br />

 sex:  <input type="text" /> <br />

 <input type="button" value="submit" />
</form>
 
css 禁用所有输入框的方法分享

css 禁用所有输入框的方法分享