CSS进阶CSS3,初入前端必备技能之一

13 篇文章 0 订阅

一、CSS3是什么?

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。

最重要CSS3模块如下:

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

二、使用步骤

1.CSS3 边框

border-radius CSS3 圆角

div
{
border:2px solid;
border-radius:25px;
}

box-shadow CSS3 盒阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

border-image CSS3 边界图片

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

2.CSS3 背景

background-image属性
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size 属性

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

background-origin 属性
content-box, padding-box,和 border-box区域内可以放置背景图像

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

background-clip属性
背景剪裁属性是从指定位置开始绘制

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

3.box-shadow

语法:box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述

第一个 参数

.container {
  box-shadow: 0 0 0 1px blue;
}

4.渐变(Gradients)

两种类型的渐变(gradients):

  1. 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  2. 径向渐变(Radial Gradients)- 由它们的中心定义

使用属性:background-image 必须放在所有属性最后

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

从上到下(默认):

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右:

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

对角:

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度:
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

background-image: linear-gradient(angle, color-stop1, color-stop2);
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

重复线性渐变:

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变:

#grad {
  background-image: radial-gradient(red, yellow, green);
}

设置形状:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

5.文本效果

文本阴影

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

在这里插入图片描述

6.字体

7.2D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
联合使用

div
{
transform: translate(50px,100px) rotate(45deg);
-ms-transform: translate(50px,100px) rotate(45deg); /* IE 9 */
-webkit-transform: translate(50px,100px) rotate(45deg); /* Safari and Chrome */
}

translate() 方法

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate() 方法

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 方法

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

skew() 方法

语法:

transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

matrix() 方法 (丧心病狂)

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

详解矩阵算法:

// 例子:
#transformedObject { 
position: absolute; 
left: 0px; 
top: 0px; 
width: 200px; 
height: 80px;
}

在这里插入图片描述
↓添加代码
transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform-origin属性的时候起作用。

#transformedObject { 
position: absolute; 
left: 0px; 
top: 0px; 
width: 200px; 
height: 80px;
transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
transform-origin: 0 0;
}

在这里插入图片描述
过程详解:
matrix(0.9, -0.05, -0.375, 1.375, 220, 20)用矩阵表示
在这里插入图片描述
元素最初的每个顶点相当一个向量
在这里插入图片描述
变换后的四个点的坐标值,其实是matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵与原始四个点对应的向量分别相乘而得,具体的运算过程如下图
在这里插入图片描述

8.3D 转换

在这里插入图片描述

9.过渡

指定要添加效果的CSS属性
指定效果的持续时间。

// 应用于宽度属性的过渡效果,时长为 2 秒
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

在这里插入图片描述

10.动画

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
    // 0%   {background: red;}
    // 25%  {background: yellow;}
    // 50%  {background: blue;}
    // 100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
    // 0%   {background: red;}
    // 25%  {background: yellow;}
    // 50%  {background: blue;}
    // 100% {background: green;}
}

// 规定动画的名称
// 规定动画的时长
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

总结

good afternoon
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值