乐趣区

关于前端学习:CSS样式CSS3新特性

jiezi

  • 创立自定义字体图标

    • @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
退出移动版