css3总结

最新推荐文章于 2022-03-17 21:21:09 发布

strayyiyi

最新推荐文章于 2022-03-17 21:21:09 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/strayyiyi/article/details/79598952

版权

浏览器的内核：
Trident 内核--IE浏览器
Gecko firefox
webkit chrome (2018年blink引擎)
浏览器前缀：
-webkit chrome safari
-moz firefox
-ms- IE
-o- opera

css3使以前能用图片和脚本就实现的，用css3语句实现

（1）border-radius:

(2) box-shadow:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

前两项可以为负数。正数时，阴影在右边。负数时，阴影在左边。

阴影模糊半径，值越大，阴影的边缘越模糊。

阴影扩展半径：可以为正数和负数。正数时，整个阴影都扩大，负数时，整个阴影都缩小。

insert设置内阴影和外阴影。

可设置多个阴影

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

（3）border-image

(4)线性渐变

linear-gradient radical-gradient

(5)文字和字体

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

font-face:

@font-face {

font-family:

src:

}

text-shadow:设置文本的阴影效果

text-shadow: X-Offset Y-Offset blur color;

(6) 背景

background-origin:设置背景图片的起始位置

background-origin ： border-box | padding-box | content-box;

需要背景设置为no-repeat。否则，它会从边框开始显示

background-clip: 用来将背景图片做适当的裁剪以适应需要

background-clip ： border-box | padding-box | content-box | no-clip

background-size: 设置背景图片的大小。以长度或者百分比来显示

background-size: auto | <长度值> | <百分比> | cover | contain

(7)选择器

属性选择器

a[class^=icon]{
  background: green;
  color:#fff;
}

:root:指根元素--html元素

:not否定选择器

input:not([type="submit"]){
  border:1px solid red;
}

:empty空选择器

p:empty {
  display: none;
}

:target选择器

:first-child

选择父元素的第一个子元素的元素E

:last-child

:nth-child: 定位某个父元素的一个或多个特定的子元素

从0开始计算

ol > li:nth-child(2n){
  background: orange;
}

:nth-last-child: 从父元素的最后一个元素开始计算

:first-of-child:定位父元素下的某个类型的第一个子元素

/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

:nth-of-type(n)

:last-of-type

:nth-last-of-type()

:only-child: 父元素仅有一个子元素

:only-of-type

:enabled

:disabled

:checked

::selection: 匹配鼠标选择文本时的文本

:read-only

input[type="text"]:read-only{
  border-color: #ccc;
}

:read-write

::before和::after

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
  text-align:center;
  position:relative;
  top:80px;
}
.box {
  width:70%;
  height:200px;
  background:#FFF;
  margin:40px auto;
}

.effect{
  position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
    content:"";
	position:absolute; 
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}
</style>
</head>
<body>
  <div class="box effect">
  <h3>Shadow Effect </h3>
</div>
</body>
</html>

(8)旋转变形

旋转：

transform: rotate(-20deg)

扭曲：

tansform: skew(45deg)

缩放:

transform: scale(0.8)

位移

transform: translate(50px, 100px)

矩阵

matrix

修改原点

transform-origin

transition

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

transition-property需要有中心点才能有过渡效果

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition: width;
  transition:width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  	transition-delay:.18s;
}
div:hover {
  width: 400px;
}

animation

@keyframes

@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}

animation-name

animation-timing-function

animation-delay

animation-iteration-count: infinite

animation-direction: normal alternate

animation-play-state: running/ paused

@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
}

(9) 列设置

columns: 200px 2;

参数	参数说明
<column-width>	主要用来定义多列中每列的宽度
<column-count>	主要用来定义多列中的列数

flex布局

(10) 媒体查询

@importurl(style.css) all

@media screen{

}

使用min-width和max-width

@media screen and (min-width:600px) and (max-width:900px){}

使用device width设备的尺寸

@media screen and (max-device-width:480px)

not和only

@media not print and ( )

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

(11)css中的函数

attr() ： attr(title)

calc() : calc(100%-100px)

(12)自由缩放属性resize

用来改变元素尺寸大小

resize: none | both | horizontal | vertical | inherit

取值说明：

属性值	取值说明
none	用户不能拖动元素修改尺寸大小。
both	用户可以拖动元素，同时修改元素的宽度和高度
horizontal	用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical	用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit	继承父元素的resize属性值。

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  resize: horizontal;
}

(11) 3D

父元素增加

perspective: 400

perspective-origin: 50% 50%

transform-style: preserve-3d

transform :

strayyiyi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3总结

浏览器的内核：Trident 内核--IE浏览器Gecko firefoxwebkit chrome (2018年blink引擎)浏览器前缀：-webkit chrome safari-moz firefox-ms- IE-o- operacss3使以前能用图片和脚本就实现的，用css3语句实现（1）border-radius: (2) box-shadow:box-shadow: ...
复制链接

扫一扫