分类目录归档：CSS教程

CSS教程

css3 counter属性简介说明


摘要：
下文讲述css3中counter属性的简介说明，如下所示:

html元素中ul、ol元素是一个列表项，拥有元素计数，那么其它的Html子元素是否有计数信息显示呢?
例：
我们如何对div下面的子div使用css输出其计数信息呢？

带着这些疑问，css3推出了counter属性,可以实现任何元素的计数操作，如下:


counter属性的功能及用法

counter属性的功能:生成元素计数信息
counter属性需结合 counter-reset(设置计数器的初始值及计数器所作用的元素) counter-increment(计数器每次增加的步长) 才能生成计数值
例:
counter-reset: qty 0
/*定义计数器名字为”qty”从1开始*/
counter-reset: qty 3
/*定义计数器名字为”qty”从3开始*/
counter-reset: qtyA 3 qtyB 9 qtyC 10
/*定义三个计数器 qtyA 从3开始 qtyB 从9开始 qtyC 从10开始 */

　　
counter-increment: qty 10 /*qty计数器每次增加 10*/
counter-increment：qty 22 /*qty计数器每次递增 22*/

最后使用counter调用计数器生成计数信息，结合:after或:before中的content属性，将计数信息输出至元素上


counter属性的举例应用

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
  ---counter计数器的应用
  </title>
 <style>

p{counter-increment: qty 1;counter-reset: qtya 0; }
span{counter-increment: qtya 1; }


p:before{ content:counter(qty)"、";}
span:before{ content:counter(qty)"-"counter(qtya)"、";}
span{
  display:block;
  text-indent:10px;
}
 </style>

 </head>
 <body>
    
<div>
   <p>大类一</p>
     <span>猫猫教程</span>
	 <span>猫猫教程</span>
	 <span>猫猫教程</span>

     <p>大类二</p>
     <span>猫猫教程</span>
	 <span>猫猫教程</span>
	 <span>猫猫教程</span>
	  <span>猫猫教程</span>
</div>
 
</body>
</html>
css counter属性举例说明

css counter属性举例说明

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属性举例说明