文章目录
- 前言
- 一、圆角样式-border-radius
- 二、阴影样式-box-shadow
- 三、过渡样式与缩放样式--transition--transform
- 四、平移样式-translate
- 五、旋转样式-3D旋转-transform:rotate()
- 六、倾斜扭曲样式-transform:skewX(deg)
- 七、变形样式中心点——transform-origin
- 八、景深样式--perspective:()
- 九、伪类元素---before---after
- ---------------------------------------- 选择器--------------------------------------------
- 一、相邻选择器 +
- 三、兄弟选择器 ~
- 四、指定选择器 nth-of-type
- 五、子元素指定选择器 nth-child
- 六、属性选择器 [name=" "]
前言
html5,css3是html,css的迭代产物，相较以前的html和css，迭代产生的区别简单来说就是标签，功能样式都变得更加丰富；其中html5的产生对互联网行业的影响尤为重大，由于它在ios和Android系统上的兼容性都很好，所以现在经常借助它开发在两种系统上都通用的软件；
一、圆角样式-border-radius
border-radius:圆角样式能将边角变得圆滑，具体变化方式是在边框内找一个点給边角做圆心，从这点处到圆角各点距离相等（也就是圆的半径），通过设定半径的值来影响边框形状；
border的使用方式有多种，具体见代码；
兼容性：最低IE6.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角样式</title>
<style type="text/css">
.A1{width:200px;height:200px;border:black solid 10px;border-radius:50%;float:left;margin-right:100px;}
/输入百分比，以元素长宽为依据，如果宽高一至则元素上下左右都是以同一个半径画圆/
.A2{width:100px;height:200px;border:black solid 10px;border-radius:50%;float:left;margin-right:100px;}
/如果宽高不一致，那产生的效果，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。/
.A3{width:100px;height:200px;border:black solid 10px;border-radius:20px;float:left;margin-right:100px;}
/上下左右都为20px/
.A4{width:100px;height:200px;border:black solid 10px;border-radius:50px 10px;float:left;margin-right:100px;}
/左上-右下：50px;右上-左下：10px/
.A5{width:100px;height:200px;border:black solid 10px;border-radius:50px 10px 50px;float:left;margin-right:100px;}
/左上：50px 右上-左下：10px; 右下：50px/
.A6{width:100px;height:200px;border:black solid 10px;border-radius:50px 10px 50px 10px;float:left;margin-right:50px;}
/左上开始顺时针方向/
.A7{width:100px;height:200px;border:black solid 10px;float:left;border-top-left-radius:50px;border-top-right-radius:10px;border-bottom-right-radius:50px;border-bottom-left-radius:10px}
</style>
</head>
<body>
<div class='A1'> </div>
<div class='A2'></div>
<div class='A3'></div>
<div class='A4'></div>
<div class='A5'></div>
<div class='A6'></div>
<div class='A7'></div>
</body>
</html>
无圆角样式：
圆角样式：
二、阴影样式-box-shadow
box-shadow: 横向偏移值 纵向偏移值 模糊值 拓展大小，inset 横向偏移值 纵向偏移值 模糊值 拓展大小；
其中inset表示内部阴影设定；
该样式可设定无限数目的内外阴影，阴影的层级顺序为先写的层级高；
boder（边框）也是会产生阴影的，但产生的阴影不占空间；
无限制的内外阴影与层级展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{width:200px;height:200px;border:1px black solid;box-shadow:200px 0px 0px 0px black,-200px 0px 0px 0px red,0px 200px 0px 0px gray,0px -200px 0px yellow,inset 0 -50px 0px 0px blue, inset -50px 0px 0px 0px black,inset 0px 50px 0px 0px green,inset 50px 0px 0px 0px red;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
一般使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影样式</title>
<style type="text/css">
#lil{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 0px;float:left;margin-right:70px;}
#lil1{width:200px;height:200px;border:1px black solid;box-shadow:50px 0px 100px 0px;float:left;margin-right:70px;}
#lil2{width:200px;height:200px;border:1px black solid;box-shadow:0px -50px 100px 0px;float:left;margin-right:70px;}
#lil3{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 50px;float:left;margin-right:70px;}
#lil4{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 50px,inset 0 0 100px 0 blue;margin-right:70px;position:absolute;top: 300px;}
#lil5{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 50px,inset 0 0 10px 50px blue;margin-right:70px;position:absolute;left:300px;}
#lil6{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 50px,inset 50px 0 10px 0 blue;margin-right:70px;position:absolute;left:300px;}
#lil7{width:200px;height:200px;border:1px black solid;box-shadow:0px 0px 100px 50px,inset 0 -50px 10px 0 blue;margin-right:70px;position:absolute;left:300px;}
</style>
</head>
<body>
<div id='lil'></div>
<div id='lil1'></div>
<div id='lil2'></div>
<div id='lil3'></div>
<div id='lil4'>
<div id='lil5'><div id='lil6'><div id='lil7'></div></div></div>
</div>
</body>
</html>
三、过渡样式与缩放样式–transition–transform
一.过渡样式-transition
1、transition-property 用于指定元素要执行过渡的属性
多个属性之间使用 ‘,’ 隔开
选择所有属性则输入all
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
2、transition-duration 用于指定过渡效果的持续时间,一定要有单位 --s;
3、transition-timing-function 表示动态变化过渡的时序函数（变化速度效果）
常用模式： ease(默认属性) linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速后减速 cubic-bezier() 来制定时序函数（贝塞尔曲线）
4.transition-delay 延迟过渡效果开始时间;
过渡时间和过渡效果必须给定且在对应的 元素名:hover (hover在鼠标移到元素上时变化出添加的特殊样式)里输入对应的变化后属性值，否则该元素将没有过渡效果；
简写:transition:margin-left 5s ease 2s;
（ transition:transition-property transition-duration transition-timing-function transition-delay ;）
二.缩放样式–transform:scale()
可对元素进行视觉缩放但不占用位置；
transform:scale(X,Y):X为水平方向的缩放值；Y为竖直方向的缩放值；
transform:scale(XY)：XY为水平和竖直方向共用一个值；
transform:scaleX(2) scaleY(-1)：X为水平方向的放大2倍；Y为竖直方向的反转元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>transition---transform:scale</title>
<style type="text/css">
.c1{transition-duration: 4s; /*默认为动态变化持续时间*/}
.c1:hover{transform:scale(2,-1);}
.c2:hover{transform:scale(0);}
.c3:hover{transform:scaleX(2) scaleY(-1);}
.ok{width:300px;height:200px;margin-top:100px;background:red;transition-property:all;transition-duration: 3s;transition-timing-function: linear;transition-delay: 2s; }
.ok:hover{width:100px;height:100px;margin-left:500px;}
.ok1{width:300px;height:200px;margin-top:100px;background:red;transition:margin-left 5s ease 2s;}
.ok1:hover{margin-left:200px;}
</style>
</head>
<body>
<img src="../图片素材/小川.jpg" width="200px" height="200px" class='c1'>
<img src="../图片素材/小川.jpg" width="200px" height="200px" class='c2'>
<img src="../图片素材/小川.jpg" width="200px" height="200px" class='c3'>
<div class='ok'></div>
<div class='ok1'></div>
</body>
</html>
四、平移样式-translate
transform:translate(X,Y):平移元素视觉位置，不改变实际位置；X为水平方向，Y为竖直方向；只输入一个值就只改变X的位置；也可以写为translateX()，translateY().
可以输入百分比，百分比为分别按元素宽高的比例移动；
可以在不清楚元素大小的情况下利用translate来使元素居中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>translate</title>
<style type="text/css">
div{width:200px;height:200px;background:red;transition:2s;}
/* div:hover{transform:translate(200px);}*/
/* div:hover{transform:translate(200px,100px);}*/
/* div:hover{transform:translateX(200px) translateY(100px);} 水平向右+竖直向下=右下斜着走*/
/* div:hover{transform:translate(100%);}*/
div:hover{transform:translate(100%,50%);}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>translate</title>
<style type="text/css">
*{margin=0px;padding=0px;}
div{width:200px;height:200px;background:red;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div></div>
</body>
</html>
五、旋转样式-3D旋转-transform:rotate()
transform:rotate():在css3中用于控制元素绕其中心点的旋转；
使用：度数deg 度数为正数则为顺时针旋转，负数则为逆时针旋转；
3D旋转：rotateX() rotateXY() rotateZ()
可通过改变元素中心点的位置来改变旋转效果；
普通旋转：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转样式</title>
<style type="text/css">
.love{width:200px;height:200px;background:red;transition-duration:2s;transition-timing-function: ease-in;margin-top:100px;margin-left:90px;float:left;}
.love:hover{transform:rotate(-360deg);}
/* .leo{width:200px;height:200px;background:red;margin-top:100px;margin-left:90px;}*/
</style>
</head>
<body>
<div class='love'></div>
<!-- <div class='leo'></div> -->
<!-- <script type="text/javascript">
var leo=document.getElementsByTagName('div')[0];
var deg=0;
setInterval(function){
deg++;
leo.style.transform='rotate('+deg+'deg)'
},1);
</script>
-->
</body>
</html>
3D旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转样式</title>
<style type="text/css">
.love{width:200px;height:200px;background:red;transition-duration:4s;position:absolute;left:50%;top:50%;margin:-100px 0px 0px -100px;transform-origin:left center ; /*50px -50px;*/ /*-50% 50%*/ }
.love:hover{transform:rotateY(60deg) rotateX(45deg) rotateZ(45deg);}
</style>
</head>
<body>
<div class='love'></div>
</body>
</html>
六、倾斜扭曲样式-transform:skewX(deg)
transform:skewX(deg)：以元素中心为坐标原点作二维坐标轴，沿着x轴倾斜度数；变化过程中元素X轴中心线长度不变，元素的竖直方向长度变化；当deg为90度时，上下中心线变为纵向，元素消失；
transform:skewY(deg)：以元素中心为坐标原点作二维坐标轴，沿着y轴倾斜度数；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>倾斜扭曲样式</title>
<style type="text/css">
#l1{width:200px;height:200px;background:red;float:left;transition-duration: 3s;margin-right:200px;}
#l1:hover{transform:skewX(45deg);}
#l2{width:200px;height:200px;background:red;float:left;transition-duration: 3s;margin-right:200px;}
#l2:hover{transform:skewX(90deg);}
#l3{width:200px;height:200px;background:red;float:left;transition-duration: 3s;margin-right:200px;}
#l3:hover{transform:skewX(180deg);}
</style>
</head>
<body>
<div id='l1'></div>
<div id='l2'></div>
<div id='l3'></div>
</body>
</html>
七、变形样式中心点——transform-origin
transform-origin:控制元素中心点的位置；
使用方式：可输入英文单词，像素值（可输入负值），百分比（可输入负值）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转样式</title>
<style type="text/css">
.love{width:200px;height:200px;background:red;transition-duration:4s;position:absolute;left:50%;top:50%;margin:-100px 0px 0px -100px;transform-origin:left bottom;/*50px -50px;*/ /*-50% 50%*/ }
.love:hover{transform:rotate(60deg);}
</style>
</head>
<body>
<div class='love'></div>
</body>
</html>
八、景深样式–perspective:()
景深越大，视觉上元素离我们越远. 在CSS3中perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深）
transform: perspective(depth);
九、伪类元素—before—after
伪类元素：附着在元素上的伪类，并非真正的元素，通过content激活，可具有真实元素的样式；默认为行内式 伪类元素类文本内容在浏览器中不可被选中；
before与after的区别在于相对于主元素的默认位置一个是在前，一个是在后；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类元素</title>
<style type="text/css">
*{padding:0px;margin:0px;}
.ak{width: 300px;height: 200px;background:yellow;position:relative;margin:100px;}
.ak:before{width:100px;height:100px;background: red;content:"999";position: absolute;left:100%;trasition-duration:2s;}
.ak:after{width:100px;height:100px;background: blue;content:"666";position:absolute;left:0%;}
.ak:hover:before{
transform:rotate(45deg);
}
.m4{width: 300px;height: 200px;background:gray;position:relative;left:100%;top:300px;}
.m4:before{content:"999";color:red;}
.m4:after{content:"666";color:yellow;}
</style>
</head>
<body>
<div class="ak">0000<div>
<div class="m4">-------</div>
</body>
</html>
---------------------------------------- 选择器--------------------------------------------
一、相邻选择器 +
相邻选择器：选择与指定元素同级别的下一元素；
下一元素只能向下找相邻元素。+表示相邻；
+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相邻选择器</title>
<style type="text/css">
body{background: pink;}
.fk{color:red;}
.fk+div{color: blue;}
.sy{color:yellow;}
.sy+.bh{color:gray;}
.bh+div+div>.last{color:red;}
</style>
</head>
<body>
<div class='fk'>1111111</div>
<div>wwwwwwww</div>
<div class='sy'>!!!!!!!!!</div>
<div class='bh'>.........</div>
<div>=========</div>
<div>9999<span class='last'>999999</span></div>
</body>
</html>
三、兄弟选择器 ~
兄弟选择器： 选择指定元素同级别的下的所有指定元素；
兼容性：最低IE8;
使用：.ll{color:pink;}
.ak~li{color:red;} /.ak同级别下全部li/
.ll~{color:blue;} /.ll同级别下全部/
.ol~li,div,span{color:yellow;} /ol同级别下所有li,div,span/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器</title>
<style type="text/css">
body{background: gray;}
.ll{color:pink;}
.ak~li{color:red;}
.ll~*{color:blue;}
.ol~li,div,span{color:yellow;}
</style>
</head>
<body>
<ul>
<li class='ak'>!!!!!!!!</li>
<li>@@@@@@@@</li>
<li>########</li>
<li>$$$$$$$$</li>
<div>&&&&&&7</div>
<span>???????</span>
<li>%%%%%%%%</li>
</ul>
<ul>
<li class='sky ll'>!!!!!!!!</li>
<li>@@@@@@@@</li>
<li>########</li>
<li>$$$$$$$$</li>
<div>&&&&&&7</div>
<li>%%%%%%%%</li>
</ul>
<ul>
<li class='ol'>!!!!!!!!</li>
<li>@@@@@@@@</li>
<li>########</li>
<li>$$$$$$$$</li>
<div>&&&&&&7</div>
<li>%%%%%%%%</li>
<span>???????</span>
</ul>
</body>
</html>
四、指定选择器 nth-of-type
nth-last-of-type():自下而上选择元素,从一开始給同级别元素计数，可传入数字选中指定位置元素，传入odd表示选中其顺序单数的元素，传入even表示选中其顺序的偶数；也可输入指定倍数和推移值，n;
nth-of-type():自上而下选择元素,从一开始給同级别元素计数，可传入数字选中指定位置元素，传入odd表示选中其顺序单数的元素，传入even表示选中其顺序偶数的元素；也可输入指定倍数和推移值，n;
兼容性：IE9及以上；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* 选中奇数个体*/
.nth>li:nth-of-type(odd){color:pink;}
.lol>li:nth-last-of-type(odd){color:blue;} /*从下至上计数
/* 选中偶数个体*/
.nth>li:nth-of-type(even){color:blue;}
div:nth-of-type(2n+1){color:red;} /*n=0,1,2,3...*/
div:nth-of-type(4){color:green;} /*从一开始计数*/
</style>
</head>
<body>
<ul class='nth'>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
</ul>
<ul class='lol'>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>888888</li>
</ul>
<div>aaaaaaa</div>
<div>bbbbbbb</div>
<div>ccccccc</div>
<div>ddddddd</div>
<div>eeeeeee</div>
<div>fffffff</div>
</body>
</html>
五、子元素指定选择器 nth-child
nth-child:选择指定元素的父级元素下的指定子元素；方向从上到下；传入odd表示选中其顺序单数的元素，传入even表示选中其顺序偶数的元素；也可输入指定倍数和推移值，n;
nth-last-child:方向从下到上；选择指定元素父级下的指定子元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素指定选择器</title>
<style type="text/css">
body{background: gray;}
div:nth-child(3){color:green;}
div:nth-child(4){color:green;}
div:nth-child(even){color:yellow;}
div:nth-last-child(odd){color:blue;}
</style>
</head>
<body>
<div>111111</div>
<div>222222</div>
<div>333333
<div>......</div>
<div>......</div>
<div>......</div>
</div>
<p>aaaaaaaaa</p>
<div>444444</div>
<div>555555</div>
<div>666666</div>
<div>777777</div>
<div>888888</div>
</body>
</html>
六、属性选择器 [name=" "]
*【name 】 :选中属性名为name的元素；
[name=“value"]:选中属性名为name以及属性值为”value"的元素；
[name~=“value"]:选中属性名为name以及属性值值包含单独”value"值的元素；
[Y^=“abc”]{color:red;}:筛选属性名为Y，并且Y开头值为abc开头的元素；
[Y$=“iii”]{color:red;}：筛选属性名为Y，并且Y结尾值为iii结尾的元素；
[Y=“kkk”]{color:red;}：筛选属性名为Y，并且Y包含值kkk的元素；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/* div[class]{color:red;}*/
[class]{color:red;}
[I]{color:blue;}
[C="YBMl"]{color:pink;}
[C~="dao"]{color:yellow;}
</style>
</head>
<body>
<div class="Y">Y</div>
<div I="MAI">MAI</div>
<div C="YBM" I="dao">YBM</div>
<div C="YBMl">YBM</div>
<div C="YBM dao">YBM</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style type="text/css">
/*[Y^="abc"]{color:blue;}*/
/* [Y$="iii"]{color:green;}*/
[Y*="kkk"]{color:red;}
</style>
</head>
<body>
<div Y="abc iiikk ">UUU</div>
<div Y="abciiikkk ai">UUU</div>
<div Y="iiikkk abciii">UUU</div>
<div Y="iiikkk iii">UUU</div>
<div Y="abciii kkk">UUU</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
