Css3概念知识点

-webkit-（谷歌 safari）或 -moz- （火狐） -ms- 为指定浏览器的前缀。
em、strong、i、b、 font-style:normal;
p:first-line 控制文本第一行。<p>一个p标签</p>
p:first-letter{ 文本第一个字
font-size: 20px;
}
p::selection{ 当文本选择的时候（复制）设置背景和字体色注意双冒号。
background: gray;
color: #fff;
}
p:before{
content: '520';/*给p开头加内容单双冒号都可以*/
}
p:after{
content: '1314';/*给p末尾加内容单双冒号都可以*/
}

font: bold 100px/200px "微软雅黑"; 加粗字的大小行高字体

弹性盒模型
/* -webkit-box-orient:vertical; *//*垂直显示*/
/* -webkit-box-direction:Reverse; *//*.box里的内容倒序*//

/* -webkit-box-ordinal-group:2; *//*自定义一排小盒子的排列顺序*/

-webkit-box-flex:5;/*5/15*/
/*子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和(这里为15)
可以理解为：
子元素的尺寸 = {当前元素所处父级盒子/所有子元素的box-flex属性值的和(这里为15)}*当前子元素的box-flex属性值
第一个子div的尺寸 = .box的尺寸*1/1+2+3+4+5 15
*/
}

对于多出来的水平空间管理(写在父级)：
-webkit-box-pack:start;父级下的子内容靠左 = float:left;默认
-webkit-box-pack:end;父级下的子内容靠右 = float:right;
-webkit-box-pack:center;父级下的子内容水平居中;
-webkit-box-pack:Justify;父级下的子内容平均分多余的空隙加了间距（相当于给图片加了margin的效果）;

对于多出来的垂直空间管理(写在父级)：
-webkit-box-align:start; 父级下的子内容垂直顶部
-webkit-box-align:center; 父级下的子内容垂直居中
-webkit-box-align:end; 父级下的子内容垂直底部
如果要使内容水平垂直居中：
-webkit-box-pack:center;
-webkit-box-align:center;就这两个一起。

阴影
/*box-shadow:[inset] x y blur [spread] color
inset投影方式:内投影;不给：外投影；
x、y:阴影偏移;(第一二为参数、可为0)
blur:模糊半径;(第三位参数）
spread:扩展阴影半径、先扩展原有形状，再开始画阴影(第4为参数);
color:颜色(第五位参数)

box-shadow: 0 0 10px 30px pink;
box-shadow: x y blur spread color;[inset可不加]
*/

图片倒影：
img{
display: block;
margin: 200px auto;
-webkit-box-reflect:left 0px;/*图片倒影*/
/*-webkit-box-reflect:direction npx;
left right above上 below 下像素
*/
}

图片可以随便拖拽：
<style>
.box{
width: 300px;
height: 200px;
background: url(img/3.jpg);
border: 5px solid #000;
resize:both;/*图片拖拽*/
overflow: auto;/*必须配合overflow:auto 一起*/
}
</style>
</head>
<body>
<div class="box">
</div>

如果导航栏的边框线有重合的：
可以在css中加：margin-left：-1px;就没有重合了。
img{
filter:blur(10px);模糊10个像素
}
background-clip:（背景裁切）
1.border-box;默认
2.padding-box;
3.content-box;内容
盒模型：
border：边框区域；
padding:内填充;
content:内容区；
使用例子：
.drog{
width: 520px;
height: 640px;
background: rgba(255,255,255,.5);
border: 2px solid red;
background-clip: content-box;
padding: 5px;//一般与前面三个属性配合使用
border-radius:8px;
}
background:linear-gradient();线性渐变

background:linear-gradient(
to top,
red 20%,
green 70%,
blue 90%
);

background:linear-gradient(
red 20%,
green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
green 90%,
black 51%
);
接下来：
background:linear-gradient(
tansparent 49%,红色这里改成透明红色占49%
green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
green 51%,中间绿色就只占2%（51-49）
transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51%
)

.input{
outline: none;
height: 30px;
border: none;
border-bottom: 2px solid #000;
transition:.8s;
}
.input:focus{/*当鼠标点击加底部横线*/
border-bottom-color: black;
}
.input:focus::-webkit-input-placeholder{
transition:0.5s;
}
.input:focus::-webkit-input-placeholder{
color: black;
transform:scale(0.6) translateY(-3px);
transform-origin:left top;
/*鼠标点击提示字缩小并且文字往上位移3个距离靠左上角*/
}
<tr>
<td class="td_left">姓名:</td>
<td><input type="text" class="input" placeholder="请输入名字"/></td>
</tr>

input 的id可以和label的for相互绑定：
<input type="checkbox" class="input3" name="doof" id="shucai"/>
<label for="shucai" class="label2"></label> 熟菜

a 的href 可以与div的id相互绑定 css：.content:target{/*它会匹配#号后面的内容*/display:block;}
<div class="content" id="div1">网站内容1</div>
<a href="#div1">网站首页</a>

边框：
border-radius 属性被用于创建圆角：
div
{
border:2px solid;
border-radius:25px; 值越大越圆
}

box-shadow 属性被用来添加阴影:（卡片）
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) ;
margin-bottom: 25px;
}

div.container {
text-align: center;
padding: 10px 20px;
}

<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>

box-shadow: 10px 10px 5px #888888; 左右、上下阴影大小颜色
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
顺序左右上下

border-image 属性允许你指定一个图片作为边框：
#round ：平铺
{
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
border-image:url(border.png) 30 30 round;上下左右
}
?
#stretch ：拉升
{
-webkit-border-image:url(border.png) 30 30 stretch;
-o-border-image:url(border.png) 30 30 stretch;
border-image:url(border.png) 30 30 stretch;上下左右
}

背景：
background-image: url(img_flwr.gif), url(paper.gif);背景图片（可以多个背景）
background-size:100px 80px;背景大小：上下左右
background-repeat:no-repeat;不重复
background-Origin属性指定了背景图像的位置区域。

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:center;控制背景位置
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;图片靠近的区域
}
#div2
{
background-origin:padding-box;
}

background-clip：规定背景的绘制区域取值：content-box 和 padding-box

渐变：线性渐变linear-gradient 和径向渐变Radial Gradients
ackground: linear-gradient(direction, color-stop1, color-stop2, ...);控制方向（多个颜色）可以控制透明度
background: linear-gradient(angle, color-stop1, color-stop2);控制角度
repeating-linear-gradient() 函数用于重复线性渐变：

从上到下渐变
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue); 标准的语法（必须放在最后）
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

从左到右：
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red , blue); 标准的语法（必须放在最后）

-webkit-linear-gradient：控制渐变的开始方向不写默认为从上到下

对角：左上右下
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue); 标准的语法（必须放在最后）
}

径向渐变由它的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
例子：
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
由中心向外默认形状为椭圆颜色后面都可以接百分比例如(red 5%, green 15%, blue 60%)
circle 表示圆形，ellipse 表示椭圆形

文本阴影：
h1
{
text-shadow: 5px 5px 5px #FF0000; 左右上下模糊颜色
}
div {
box-shadow: 10px 10px grey; 左右上下模糊颜色
}

阴影的一个使用特例是卡片效果： box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

CSS3中，自动换行属性允许您强制文本换行
text-wrap 规定文本的换行规则。
允许长文本换行:
p {word-wrap:break-word;}

单词拆分换行：
p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

2D 3D转换
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg)；控制最后一行

rotate（30deg）旋转
transform（50px，100px）平移：上下左右
scale(2,3) 放大：高度宽度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴

3D：
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);
}

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);
}
translate3d(x,y,z)：translateX(x) translateY(y) translateZ(z)
以此类推 scale rotate

2D 3D区别 3D在前面加 x y z

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
条件：
指定要添加效果的CSS属性
指定效果的持续时间

transition: width 2s;
-webkit-transition: width 2s; 宽度属性过渡

多项过渡保持原样先用：transition（转换） hover：trasfrom（旋转）
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; //
transition: width 2s, height 2s, transform 2s;//
}

div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotateY(360deg);//
transform: rotateY(360deg);（3D）//
}

CSS3 动画
把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

调整尺寸(Resizing)
div
{
resize:both;
overflow:auto;
}
外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

图片：
img {
border-radius: 8px;
}圆角图片

img {
border-radius: 50%;max
}椭圆形图片

使用 border 属性来创建缩略图。：
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

图片文本
<style>
.container {
position: relative;
}

.bottomright {
position: absolute;
bottom: 8px;
right: 16px;(text-align:center)
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
<div class="container">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">右下角</div>
</div>

图片滤镜：
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

cursor: not-allowed;禁用

分页：
鼠标悬浮点击背景颜色字体变化
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>

css3弹性盒子
CSS3 弹性盒（ Flexible Box 或 flexbox）
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</style>
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：对齐排。
column：纵向排列。
column-reverse：纵向对齐排。
语法：flex-direction: row | row-reverse | column | column-reverse

猜你喜欢