CSS3的新特性

上一篇写了HTML5的新特性，不能落下CSS3独坐空房啊

HTML5新特性的链接：https://www.cnblogs.com/pingzi-wq/p/11490383.html

边框

border-radius —— 圆角边框
box-shadow —— 边框阴影

border-image —— 图片自定义边框

// 圆角边框
border-radius: 25px;

// 边框阴影 四个参数：水平阴影位置，垂直阴影位置，模糊度 颜色
box-shadow: 10px 10px 5px #f00


// 图片边框
border-image: url(image.jpg) 30 30 round | stretch

背景
- background-size —— 规定背景图片的尺寸，在css3前背景图片的尺寸有图片实际尺寸决定。
- background-origin —— 规定背景图片的定位区域，可以设置将背景图片放置于 content-box, padding-box, border-box 区域。

文字效果

text-shadow —— 文字阴影

word-wrap

// 文字阴影
h1 {
  text-shadow: 5px 5px 5px #f00;      // X轴阴影偏移 Y轴阴影偏移 阴影大小 颜色  
}


// 换行
p {
  word-wrap: normal | break-word;       // 只在允许的断子点换行 | 在长单词或者 url 地址内部进行换行  
}

字体

@font-face

// CSS3可以使得设计师可以使用任意喜欢的字体，不用必须使用已在用户计算机上安装好的字体

@font-face {
    font-family: myFirstFont;
    src: url(),
    font-weight: bold;
} // 粗体字体

div {
    font-family: myFirstFont;
}   // 此时便使用了粗体字体

2D转换

translate()
rotate()
scale()
skew()

matrix()

// 顺时针旋转给定度数
div {
    transform: rotate(30deg);
}

// 按 XY 轴的数据平移
div {
    transform: translate(50px, 100px);  // X轴正方向移动 50px，Y轴正方向移动 100px
}

// 元素扩大/缩小倍数
div {
    transform: scale(2, 4); // 元素的宽扩大 2 倍，高扩大 5 倍
}

// 元素反转给定的角度
div {
    transform: skew(30deg, 20deg);  // 围绕 X 轴元素旋转30度，Y轴旋转20度
}

3D转换 —— 与2D的不相同就是 3D 有了一个 Z 轴

过渡 —— 可以在不使用 flash 动画或者 javascript 的前提下，当元素从一种样式变换为另一种样式时为元素添加效果

// 过渡 宽从100px过渡到300px，用时2s
div {
    transition: width 2s;
    width: 100px;
    height: 100px;
}

div:hover {
    width: 300px;
}

动画 —— @keyframes规则

@keyframes myfirst {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

多列

column-count —— 规定元素应该被分隔的列数
column-gap —— 规定列之间的间隔

column-rule —— 设置列之间的宽度、样式和颜色规则

div {
    column-count: 3;     // 分成三列
    column-gap: 40px;     // 列之间间隔 40px
    column-rule: 3px outset #f00;      // 列之间的宽度，样式和颜色规则
}

CSS3的新特性

上一篇写了HTML5的新特性，不能落下CSS3独坐空房啊

推荐阅读