CSS3基础（一）

喺小VIE
73 阅读3分钟

CSS3私有前缀

W3C提出的新CSS特性，需要浏览器厂商去适配；然而新的特性不一定会正式支持，所以不同的浏览器使用特定的私有前缀表示这是一个实验性特性。

  • Chrome：-webkit-
  • Safari：-webkit-
  • Firefox：-moz-
  • Edge：-webkit-

CSS3长度单位

  • vw，viewport width，视口宽度的百分比，常用于移动端响应式布局
  • vh，viewport heigh，视口高度的百分比
  • vmax，取视口宽度或视口高度两者中最大者
  • vmin，取视口宽度或视口高度两者中最小者

CSS3盒子模型属性

  • box-sizing

    • content-box，默认值，设置的 width height 以内容区作为边界
    • border-box，设置的 width height 以边框作为边界

  • resize

    • horizontal，水平方向调节大小，配合 overflow
    • vertical，垂直方向调节大小，配合 overflow
    • both，水平垂直方向调节大小，配合 overflow
    • none，默认值

  • box-shadow

    • ?px, ?px，水平方向偏移，垂直方向偏移
    • ?px, ?px gray，水平方向偏移，垂直方向偏移，阴影颜色
    • ?px, ?px, ?px，水平方向偏移，垂直方向偏移，模糊值
    • ?px, ?px, ?px color，水平方向偏移，垂直方向偏移，模糊值，阴影颜色
    • ?px, ?px, ?px, ?px color，水平方向偏移，垂直方向偏移，模糊值，延展值，阴影颜色
    • ?px, ?px, ?px, ?px color inset，水平方向偏移，垂直方向偏移，模糊值，延展值，阴影颜色，内阴影

  • opacity（不透明度）

    • [0,1]，0为全透明，1为不透明

CSS3背景属性

  • background-origin

    • padding-box，默认值，以 padding 作为 background-image 起点
    • content-box，以内容区作为 background-image 起点
    • border-box，以边框作为 background-image 起点

  • background-clip（裁切）

    • border-box，默认值，以边框作为背景边界
    • padding-box，以 padding 作为背景边界
    • content-box，以内容区作为背景边界
    • text，以文字作为背景边界，可以实现文字遮罩效果（-webki-background-clip）

  • background-size

    • ?px(/%), ?px(/%)，调整 background-image 宽高
    • contain，宽高等比例缩放地包含 background-image
    • cover，宽高等比例缩放地适应 background-image

  • background（复合属性）

    • color，url，repeat，position / size，origin，clip

  • background（多图复合）

    • url("") no-repeat left top, url(""), url(""), url("")

CSS3边框属性

  • border-radius，边框圆角

    • border-top-left
    • border-top-right
    • border-bottom-left
    • border-bottom-right

  • outline，边框外轮廓

    • outline-width，宽度
    • outline-color，颜色
    • outline-style，none | dotted | dashed | solid | double
    • outline-offset，偏移量

CSS3文本属性

  • text-shadow，文本阴影

    • ?px, ?px，水平方向偏移，垂直方向偏移
    • ?px, ?px gray，水平方向偏移，垂直方向偏移，阴影颜色
    • ?px, ?px, ?px，水平方向偏移，垂直方向偏移，模糊值
    • ?px, ?px, ?px color，水平方向偏移，垂直方向偏移，模糊值，阴影颜色

  • white-space，文本换行

    • pre，按原文格式
    • pre-wrap，按原文格式并自动换行
    • pre-line，实现 trim 效果
    • nowrap，不换行

  • text-overflow，文本溢出，配合 overflow

    • clip，截断
    • ellipsis，呈现省略号

  • text-decoration，文本修饰（复合属性）

    • text-decoration-line, text-decoration-style, text-decoration-blue

  • (-webkit-)text-stroke，文本描边

    • text-stroke-color，描边颜色
    • text-stroke-width，宽度
    • (-webkit-)text-stroke，复合属性

CSS3渐变

  • background-image: linear-gradient()，线性渐变

    • color,color,...，按多个颜色顺序渐变
    • direction/deg, color,color,...，to [left | right...]/角度，并按多个颜色顺序渐变

  • background-image: radial-gradient()，径向渐变

    • color,...，按多个颜色顺序渐变
    • deration, color,...，at [left top |...]，并按多个颜色顺序渐变

  • background-image: repeating-linear-gradient()，重复渐变

CSS3 Web字体

在Web中引入字体文件，无需客户端本地有对应的字体

@font-face {
  font-family: 引入的字体;
  src: url(".ttf");
}

通过 iconfont.cn 可以定制文字字体

CSS3字体图标

通过 iconfont.cn 可以定制文字图标字体

引入

@font-face {
  font-family: 'iconfont';  /* Project id 4516498 */
  src: url('//at.alicdn.com/t/c/font_4516498_a9w0w7wtvef.woff2?t=1719736027272') format('woff2'),
       url('//at.alicdn.com/t/c/font_4516498_a9w0w7wtvef.woff?t=1719736027272') format('woff'),
       url('//at.alicdn.com/t/c/font_4516498_a9w0w7wtvef.ttf?t=1719736027272') format('truetype');
}

HTML

<span><i class="iconfont">&#xe8bf;</i> {{ item.views }}</span>

CSS

.iconfont {
    font-family: 'iconfont';
    font-style:normal;
}
avatar
文章
阅读
粉丝