日度归档:2020年3月11日

CSS3 overflow-wrap属性简介说明


摘要:
下文讲述css3中overflow-wrap属性的功能简介说明,如下所示:


css3 overflow-wrap功能

css3 overflow-wrap
是css3种一个新属性
用于定义html元素内的英文单词或数字是否可以换行–从内部折断作为一个新单词显示
此属性可用于放置英文字符或数字过长出现的溢出现象,影响美观

css3 overflow-wrap语法:
overflow-wrap:normal|break-word|anywhere
————参数说明——
1.normal:默认值,使用浏览器默认的处理方式
2.break-word:设置当字符串过长时,允许在单词内断行–断行发生在单词的空白处
3.anywhere:设置当字符串过长时,允许在单词内断行 –断行发生在单词的任意位置
word-wrap:此属性当前是overflow-wrap别名

例:
text-shadow属性举例说明:

 <!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.maomao365.com/" /> 
<title>猫猫教程(www.maomao365.com)
---overflow-wrap属性简介说明
</title> 
<style type="text/css">
div{
  width:130px;
  height:160px;
  background-color: #ccc;
  margin-top:5px;
  overflow-wrap:break-word; 
} 
</style> 
</head> 
<body> 
<div>www.maomao365.com  maomao 365 .com www. www.</div> 
</body> 
</html>
css3 overflow-wrap属性简介说明

css3 overflow-wrap属性简介说明

CSS3 text-fill-color属性简介说明


摘要:
下文讲述css3中text-fill-color属性的功能简介说明,如下所示:


css3 text-fill-color功能

css3 text-fill-color:
是css3中的一个新属性,用于设置文字的填充颜色,效果非常类似color;

css3 text-fill-color的应用场景:
制作流光文字,镂空文字等
例:
制作流光文字,
将text-fill-color设置为transparent,
设置文字的背景色
使用background-clip截取文字
使用 animation 结合 background-size 形成相应的动画
css3 text-fill-color注意事项:
1.目前市面上 IE11+、edge、火狐、谷歌、Safari、opera浏览器都支持text-fill-color属性
2.当同时设置text-fill-color属性和color属性时,text-fill-color会覆盖color的属性值

例:
text-fill-color属性举例说明—制作流光字案例分享:

  
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猫猫教程(www.maomao365.com)
	---使用css3新属性text-fill-color实现流光字
	</title>
    <style>
        *{margin: 0;padding: 0;}
        .container{
            width: 230px;
            height: 180px;
            position: absolute; 
        }
        .info{
            line-height: 155px;
            text-align: center;
            font-size: 50px;
            font-weight: bolder;
            -webkit-text-fill-color: transparent;
            background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            background-size: 200%,100%;
            -webkit-background-clip: text;
            -webkit-animation: dongHua 5s linear infinite ;
        }
        @keyframes dongHua {
            0%{background-position: 0 0}
            100%{background-position: -100% 0}
        }

    </style>
</head>
<body>
        <div class="container">
            <div class="info">猫猫教程</div>
        </div>
</body>
</html>
CSS3 text-fill-color属性举例说明

CSS3 text-fill-color属性举例说明

CSS3 text-stroke属性(文字边框属性)简介说明


摘要:
下文讲述css3中text-stroke属性(文字边框)的功能简介说明,如下所示:


css3 text-stroke功能

css3 text-stroke:
是css3中的一个新属性,用于设置文字的描边效果;
文字的描边类似于“html元素的边框效果”

css3 text-stroke语法:
text-stroke:[text-stroke-width] || [text-stroke-color]
—————–参数说明—————-
text-stroke-width:定义文本描边的厚度,长度单位为html的常用单位信息(px,rem等)
text-stroke-color:定义元素中文本的描边颜色,此属性值为(html常用的颜色值信息,例:html可支持的颜色代码信息(十六进制颜色、RGB、颜色代码等))
css3 text-stroke注意事项:
目前市面上 IE11+、edge、火狐、谷歌、Safari、opera浏览器都支持text-stroke属性

例:
text-stroke属性举例说明:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.maomao365.com/" /> 
<title>猫猫教程(www.maomao365.com)
text-stroke属性(文字边框属性)举例说明
</title> 
<style type="text/css"> 
 .div1{  
  margin:30px;
  text-stroke:1px blue;
  -webkit-text-stroke:1px blue;
  -moz-text-stroke:1px blue;
  font-size:36px;
} 

 /*单独设置文字边框属性宽度和颜色值*/
 .div2{  
   margin:30px;
   text-stroke-width:1px;
  -webkit-text-stroke-width:1px;
  text-stroke-color:blue;
  -webkit-text-stroke-color:blue;
  font-size:36px;
}  
 
</style> 
</head> 
<body> 
 <div class="div1">猫猫教程</div>
 <div class="div2">猫猫教程</div> 
</body> 
</html>
css text-stroke属性举例说明

css text-stroke属性举例说明