日度归档:2020年5月12日

CSS3 如何实现一个渐变的文字效果呢?


摘要:
下文讲述使用css3实现一个渐变的文字效果的方法分享,如下所示:

实现思路:
  方法1:在chrome或Safari浏览器中,我们可以使用mask-image属性实现
  方法2:使用background-image线性渐变使字体达到渐变效果

例:

    <p>
    maomao365.com <br />
	字体渐变效果的实现
   </p>
   <hr />
   
   <style>
     .text-gradient1 {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 26px;
    position: relative; 
}  
  
.text-gradient1[datainfo]::after {  
    content: attr(datainfo);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index:2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

 .text-gradient2 {  
    display: inline-block;
    color: green;
    font-size: 26px;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};
	</style>
	<h class="text-gradient1"  datainfo="猫猫教程方式1">猫猫教程方式1</h>
	<br />
	<h class="text-gradient2"  datainfo="猫猫教程方式2">猫猫教程方式2</h>
css 字体渐变的实现示例分享

css 字体渐变的实现示例分享

css 如何隐藏滚动条呢?


摘要:
下文讲述css中隐藏滚动条的方法分享,如下所示:


方式1:向右移动17像素,刚好等于滚动条的宽度,使滚动条不可见

<style>
.mainDiv{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}

.subDiv{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
  <div class="mainDiv">
    <div class="subDiv">
      
    </div>
</div>


方式2:css 直接隐藏滚动条

 <style>
 .element{
   width:200px;
   height:200px;
   overflow:scroll;
}
.element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }
</style>
  <div class="element"> 
</div>

CSS中caret-color属性简介说明


摘要:
下文讲述css中caret-color属性的相关功能说明,如下所示:


caret-color属性功能

caret-color:用于定义输入框中光标颜色,但此属性不会改变输入框中内容的颜色
例:

上述css定义,文本框中内容为蓝色,但是闪烁的光标为红色

caret-color属性兼容性:
目前市面上只有Chrome 和 Firefox可使用原生caret-color属性
–IE浏览器注意事项:
ie浏览器中光标颜色永远都是黑色,不会随着内容颜色的变化而改变颜色