关于前端学习: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