跳到主要内容

CSS3 新特性

边框 border-radius​

<p style="border-radius:30px; background-color:red;">圆角边框</p>
html

示例:

_圆角边框_

圆角边框圆角边框

盒子阴影 box-shadow​

box-shadow:阴影类型 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影大小 阴影颜色;
css
<p style="box-shadow: inset 2px 2px 2px 2px red;">盒子阴影</p>

<span style="box-shadow: 2px 2px 2px 2px red;">盒子阴影</span>
html

示例:

盒子阴影

盒子阴影

渐变 Gradients​

线性渐变 Linear Gradients​

  • 颜色沿着一条直线过渡: 从左到右、从右到左、从上到下等

    linear-gradient(渐变方向, 颜色1, yanse2, ..., 颜色n)
    css
    .block1 {
        /* 从上到下的线性渐变： */
        background: linear-gradient(red, blue);
    }

    .block2 {
        /* 从左到右的线性渐变：*/
        background: linear-gradient(to right,red, blue);
    }

    .block3 {
        /* 从左上角到右下角的线性渐变：*/
        background: linear-gradient(to bottom right, red , blue);
    }
    css

示例:

从上到下的线性渐变

从左到右的线性渐变

从左上角到右下角的线性渐变

径向渐变 Radial Gradients​

  • 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有 方向混合

    radial-gradient(center, shape size, start-color, ..., last-color);
    css
    .block1 {
        /* 颜色结点均匀分布的径向渐变：*/
        background: radial-gradient(red, green, blue);
    }

    .block2 {
        /* 颜色结点不均匀分布的径向渐变： */
        background: radial-gradient(red 5%, green 15%, blue 60%);
    }

    .block3 {
        /* 形状为圆形的径向渐变：*/
        width: 600px;height: 400px;
        background: radial-gradient(circle, red, yellow, green);
    }
    css

示例:

颜色结点均匀分布的径向渐变

颜色结点不均匀分布的径向渐变

形状为圆形的径向渐变

文本效果​

向文本添加阴影 text-shadow​

值说明
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊距离
color可选，阴影的颜色

当文本溢出包含元素时发生的事情 text-overflow​

  • 超出部分显示省略号
    • white-space:nowrap 文本不会换行，在同一行继续
    • overflow:hidden 溢出隐藏
    • text-overflow:ellipsis 用省略号来代表被修剪的文本
/*文本阴影与盒子阴影的区别在于：文本阴影无内外之分，且文本阴影没有阴影大小的设置*/
text-shadow: 2px 2px 2px red;

/*文本溢出时不换行*/
white-space: nowrap;

/*元素溢出部分隐藏掉*/
overflow: hidden;

/*文本溢出部分使用省略号显示*/
text-overflow: ellipsis;

/* 需要叠加使用 */
<p style="width: 50px; white-space: nowrap">文本溢出时不换行</p>

<p style="width: 50px; white-space: nowrap; overflow: hidden">元素溢出部分隐藏掉</p>

<p style="width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">文本溢出部分使用省略号显示</p>
css

示例:

文本阴影与盒子阴影的区别在于：文本阴影无内外之分，且文本阴影没有阴影大小的设置

文本溢出时不换行

元素溢出部分隐藏掉

文本溢出部分使用省略号显示

字体 @font-face​

@font-face {
    font-family: 必需。规定字体的名称
    src: 必需。定义字体文件的 URL
    font-weight: 可选。定义字体的粗细。默认是 "normal"
    font-style: 可选。定义字体的样式。默认是 "normal"
}
css
  • 一般是用于那种字体表情, 它可以通过color属性进行变色, 而不是图片表情

变形​

  • CSS3 变形是一些效果的集合。如平移、旋转、缩放、倾斜效果；每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

    /*transform-function是一个变形函数，可以是一个，也可以是多个，中间以空格分开*/
    transform:[transform-function];
    css

平移 translate(X, Y)​

  • translate(x, y)：平移函数，基于X、Y坐标重新定位元素的位置
  • translateX(x)：表示只设置X轴的位移
  • translateY(y)：表示只设置Y轴的位移

示例

transform: translate(20px, 30px);
transform: translateX(20px);
transform: translateY(20px);
css

正常情况

translate(20px, 30px)

translateX(20px)

translateY(20px)

2D 缩放 scale(X, Y)​

  • scale(x, y)：缩放函数，可以使任意元素对象尺寸发生变化。当该函数只接收一个值时，表示同时设置X与Y的值
  • scaleX(x)：表示只设置X轴的缩放
  • scaleY(y)：表示只设置Y轴的缩放

示例

transform: scale(0.5, 1.5);
transform: scaleX(0.5);
transform: scaleY(0.5);
css

正常情况

transform: scale(0.5, 1.5)

scaleX(0.5)

scaleY(0.5)

旋转 rotate(deg)​

  • rotate(degree)：旋转函数，取值是一个度数值。参数degree单位使用deg表示，参数degree取正值时元素相对原来中心顺时针旋转

  • 可以理解deg为'°'， (> 360°就是转动 > 1圈)

示例

transform: rotate(10deg);
css

正常情况

transform: rotate(10deg)

倾斜 skew(X, Y)​

  • skew(x, y)：倾斜函数，取值是一个度数值。
  • skewX(x)：表示只设置X轴的倾斜
  • skewY(y)：表示只设置Y轴的倾斜

示例

transform: skew(20deg, 60deg);
transform: skewX(45deg);
transform: skewY(45deg);
css

正常情况

skew(20deg, 10deg)

transform: skewX(50deg)

transform: skewY(10deg)

过渡 transition​

  • transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

  • CSS3 transition的过渡功能通过一些 CSS 的简单动作触发样式平滑过渡

transition:[transition-property transition-duration transition-timing-function transition-delay ]
css

  • transition-property：

    • 过渡或动态模拟的 CSS 属性，为了方便，一般都指定all，表示所有属性

  • transition-duration：

    • 完成过渡所需要的时间，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

  • transition-timing-function：指定过渡函数

    • linear：规定以相同速度开始至结束的过渡效果
    • ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
    • ease-in：规定以慢速开始的过渡效果
    • ease-out：规定以慢速结束的过渡效果
    • ease-in-out：规定以慢速开始和结束的过渡效果

  • transition-delay：

    • 过渡开始出现的延迟时间。
    • 正值表示元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；
    • 负值表示元素过渡效果会从该时间点开始显示，之前的动作被截断；
    • 0是默认值，元素过渡效果立即执行

  • 过渡效果的出发时机

    • 伪类触发： :hover :active :focus :checked
    • 媒体查询：通过@media属性判断设备的尺寸，方向等
    • JavaScript触发：用JavaScript脚本触发

示例

.tran {
    width: 200px;
    height: 200px;
    background-color: red;
    /*宽度发生变化时就会触发过渡效果*/
    transition: width .5s ease 0s;
}

.tran:hover {
    width: 50px;
}
css

Text

媒体查询 @media screen​

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
css

  • mediatype : 表示媒体类型

    • all：用于所有设备
    • screen：用于电脑屏幕，平板电脑，智能手机等。

  • media feature ：表示媒体功能

    • max-width：定义输出设备中的页面最大可见区域宽度。
    • min-width：定义输出设备中的页面最小可见区域宽度。

示例

.box {
    background-color: red;
    height: 50px;
}

@media screen and (min-width: 700px) {
    .box {
        width: 200px;
    }
}

@media screen and (min-width: 900px) {
    .box {
        width: 300px;
    }
}

@media screen and (min-width: 1200px) {
    .box {
        width: 400px;
    }
}
css
请尝试改变浏览器大小
编辑此页
最后由 Heng_Xin_666 于 更新
请作者喝奶茶:
Alipay IconQR Code
Alipay IconQR Code
本文遵循 CC CC 4.0 BY-SA 版权协议, 转载请标明出处
Loading Comments...
0%