【一起来烧脑】一步学会CSS3体系

标题图

CSS3 完全向后兼容

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

CSS3.png

image.png

<style> 
div
{
    border:2px solid black;
    padding:10px 40px; 
    background:pink;
    width:200px;
    border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>

box-shadow属性被用来添加阴影

image.png

<style> 
div
{
    width:200px;
    height:100px;
    background-color:pink;
    box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div>盒阴影</div>
</body>

border-image 属性允许指定一个图片作为边框

<style> 
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}
#round
{
    -webkit-border-image:url(img/border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(img/border.png) 30 30 round; /* Opera */
    border-image:url(img/border.png) 30 30 round;
}
#stretch
{
    -webkit-border-image:url(img/border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(img/border.png) 30 30 stretch; /* Opera */
    border-image:url(img/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材:</p>
<img src="img/border.png" />
</body>

background-image属性添加背景图片 background-size指定背景图像的大小 background-origin属性指定了背景图像的位置区域

div
{
    border:1px solid black;
    padding:35px;
    background-image:url(img/smile.png);
    background-repeat:no-repeat;
    background-position:left;
}
#div1
{
    background-origin:border-box;
}
#div2
{
    background-origin:content-box;
}

CSS3 文本效果

text-shadow 可向文本应用阴影

image.png

<style>
h1
{
    text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<h1>文本阴影效果</h1>

word-wrap属性允许文本强制换行

<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>

image.png

CSS3 字体

@font-face规则

<style> 
@font-face
{
font-family: myFirstFont;
src: url('.ttf'),
       url('.eot'); /* IE9+ */}
div
{
font-family:myFirstFont;
}
</style>

CSS3 2D转换

2D转换方法translate()

left(x 轴) 和 top(y 轴)

div
{
transform: translate(50px,25px);
-ms-transform: translate(50px,25px);       /* IE 9 */
-webkit-transform: translate(50px,25px);   /* Safari and Chrome */
-o-transform: translate(50px,25px);        /* Opera */
-moz-transform: translate(50px,25px);      /* Firefox */
}

image.png

2D转换方法rotate() 通过 rotate() 方法,元素顺时针旋转给定的角度。

div
{
transform: rotate(45deg);
-ms-transform: rotate(45deg);      /* IE 9 */
-webkit-transform: rotate(45deg);  /* Safari and Chrome */
-o-transform: rotate(45deg);       /* Opera */
-moz-transform: rotate(45deg);     /* Firefox */
}

image.png

scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

div
{
transform: scale(1.5,3);
-ms-transform: scale(1.5,3);   /* IE 9 */
-webkit-transform: scale(1.5,3);   /* Safari 和 Chrome */
-o-transform: scale(1.5,3);    /* Opera */
-moz-transform: scale(1.5,3);  /* Firefox */
}

skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。

div
{
transform: skew(15deg,30deg);
-ms-transform: skew(15deg,30deg);  /* IE 9 */
-webkit-transform: skew(15deg,30deg);  /* Safari and Chrome */
-o-transform: skew(15deg,30deg);   /* Opera */
-moz-transform: skew(15deg,30deg); /* Firefox */
}

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 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

CSS3 3D转换

3D转换方法rotateX()

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);   /* Firefox */
}

3D转换方法rotateY()

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);   /* Firefox */
}

CSS3 过渡

div:hover{width:300px;}

div
{
transition: width 1.5s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;  /* Opera */}

CSS3 动画

@keyframes规则

多列

column-count属性规定元素应该被分隔成几列。

div
{
column-count:5;
-moz-column-count:5;   /* Firefox */
-webkit-column-count:5; /* Safari 和 Chrome */
}

column-gap属性规定列之间的间隔。

div
{
column-gap:40px;
-moz-column-gap:40px;       /* Firefox */
-webkit-column-gap:40px;    /* Safari 和 Chrome */
}

column-rule属性设置列之间的宽度、样式、颜色。

div
{
column-rule:5px outset pink;
-moz-column-rule:5px outset pink; /* Firefox */
-webkit-column-rule:5px outset pink;  /* Safari and Chrome */
}

image.png

CSS3 用户界面

div
{
resize:both;
overflow:auto;
}

box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;  /* Safari */
width:50%;
float:left;
}

image.png

<style> 
div
{
    margin:20px;
    width:150px; 
    padding:10px;
    height:70px;
    border:2px solid black;
    outline:2px solid pink;
    outline-offset:15px;
} 
</style>

image.png


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习算法与Python学习

太值得收藏了!秒懂各种深度CNN操作

卷积神经网络(Convolutional Neural Network,CNN)是一种前馈神经网络,它的人工神经元可以响应一部分覆盖范围内的周围单元,对于大型图...

8630
来自专栏ATYUN订阅号

Cruise开源数据可视化Web应用程序Webviz,可直观了解机器人学数据

在旧金山典型车道上,Cruise的自动驾驶汽车(AV)每秒都会做出数千个复杂的决定。AV通过其摄像头,麦克风,雷达和激光雷达传感器感知的信息作出决定,以二进制格...

22420
来自专栏贾志刚-OpenCV学堂

一个狠招|如何高效学习3D视觉

有的读者可能对于计算机视觉中2D和3D视觉的区别仍然较为模糊,此处根据某篇论文中的解释,介绍如下:

17530
来自专栏Python数据科学

Python处理图片九宫格,炫酷朋友圈

在日常的生活中,大家偶尔会看到朋友圈发的照片由一张被切成九张的效果,有时由一张照片被切成九张照片所带来的视觉盛宴是不一样的!

14430
来自专栏AI研习社

如何使用DAVIS 2019数据集编写一个图像数据处理器

当我们进入一个新的领域,最难的事情往往是入门和上手操作。在深度学习领域,第一件事(通常也是最关键的)就是处理数据,所以我们在写Python代码时,需要一个更有组...

21920
来自专栏AI科技评论

CVPR 2019 | 程序主席发文泼冷水:计算机视觉的黄金时代靠的都是记忆

AI 科技评论按,随着计算机视觉技术日趋火热,作为该领域的顶级学术会议,CVPR 参与人数逐年猛增 。上周在美国长滩举办的 CVPR 2019 热度还未散去,6...

10430
来自专栏机器学习算法与Python学习

寒冬!100万$图灵奖颁给熬过寒冬的深度学习三巨头

据官方公告介绍,因三位巨头(Hinton、Bengio、LeCun)在深度神经网络概念和工程上的突破,使得 DNN 成为计算的一个重要构成,从而成为 2018 ...

11920
来自专栏数据科学与人工智能

小白学计算机视觉:前言

人类大部分信息都是视觉化接受的。人类对图像的理解,看起来是一件简单的事情。而对于计算机,这是一个复杂而有挑战的“活儿”。

13850
来自专栏贾志刚-OpenCV学堂

基于感知损失的实时风格迁移与超分辨率重建

许多经典的图像问题都可以被看成是图像变换任务,算法接受一个输入图像,然后输出变换之后的图像。最常见的例子就是图像处理中的取噪、超分辨重建、图像彩色化等问题,输入...

20620
来自专栏ATYUN订阅号

AI预测施工现场事故,提高安全性与生产率

建筑工地是一个危险的工作场所,致命事故率是其他行业的五倍。现在,许多大型建筑公司正在测试一种技术,这种技术可以通过预测事故发生的时间来拯救生命。

10020

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励