CSS样式——CSS3新样式

• 创建自定义字体图标

  • @font-face可定义图标字体，将图标字体嵌入到网页中，并且可使用文本所i有样式
  • 使用语法：

  @font-face {
    font-family: 自定义图标字体名;
    src: url(‘图标地址’);
  }
  div{
    font-family: 自定图标字体名;
  }
  /*使用图标字体*/
  p::after,p::before{
  content: 图标字体名;
  }

  • 字体图标库的使用
  • 下载字体图标文件
    阿里字体图标库：https://www.iconfont.cn/
    自定义字体图标：https://icomoon.io/app/#/select

  // 单色字体图标
  <link rel="stylesheet" href="字体图标文件">
  <标签名 class="icon 图标名"></标签名>
  
  // 彩色字体图标
  <script src="字体图标js文件"><script>
  添加 .icon{} 样式
  使用字体图标
  <svg class="icon" aria-hidden="true">
  <use xlink:href="#图标名"></use>
  </svg>

• 文字阴影效果

  语法：text-shadow:X Y blur color

  • X，Y：文字阴影偏移量
  • blur：阴影模糊
  • color：阴影颜色
    多组阴影时，每组使用逗号分隔

  text-shadow: 
    2px 2px 10px #ff0000,
    3px 3px 10px #aa0000, 
    4px 5px 10px #c75656;

• 盒子阴影效果

  语法：box-shadow:X Y blur color sparead inset

  • X，Y：盒子阴影X、Y轴偏移量
  • blur：阴影模糊
  • color：阴影颜色
  • sparead：阴影范围大小
  • inset：设置为内阴影
    多组阴影时，使用逗号分割

    box-shadow:
        2px 2px 10px #ff0000 inset,
        3px 3px 10px #aa0000 ;

• 盒子倒影效果

  语法：box-reflect

  • 上倒影：above
  • 下倒影：below
  • 左倒影：left
  • 右倒影：right

• 渐变倒影效果

  -webkit-box-reflect: 
    below  1px  -webkit-gradient(linear, 0  0, 0  100%, 
    from(transparent), 
    color-stop(.5, transparent), 
    to(rgba(3,3,3,.2)));

• 容器模糊效果

  语法：filter: blur(1px);

• CSS的四则运算

  语法：width:calc(100%-10px);

• 分栏布局

  • 一行分多少栏：column-count

  • 每栏的宽度：column-width

    • 分栏个数与栏宽度写其中一个即可
  • 栏与栏之间的间距：column-gap
  • 栏的边线：column-rule
  • 合并栏：column-span