文章目录

前言
一、圆角样式-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>

html5+css3---元素样式+选择器相关推荐

CSS3元素与选择器
多媒体元素 <video>标签专门用来播放网络上的视频或电影使用方法:<video src=""> </video> <audio> ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家. 使用HTML5+css3制作按钮开 ...
CSS3概述、选择器、兼容性、样式
一.css3简介 1.什么是css3 CSS 用于控制网页的样式和布局 CSS3 是最新的 CSS 标准 CSS3是CSS2的升级版 2.css3的功能选择器盒模型背景和边框文字特效 2D/3 ...
html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞图书编号: 9787302261834 图书格式: PDF 出版社: 清华大学出版社出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
前端开关按钮样式_如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5+css3制作出来的,希望可以帮到大家. 使用HTML5+css3制作按钮开 ...
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写&l ...
HTML5 progress元素的样式控制、兼容与实例
一.progress元素基本了解基本UI progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持.如下简单code: <progress>o(︶︿︶)o&l ...

html5+css3---元素样式+选择器