CSS3（一）
全文手打，转载请注明出处
全文手打，转载请注明出处
全文手打，转载请注明出处
一）CSS3：对CSS进行扩展
新特性：
1）选择器
2）阴影
3）形状转换（2D---3D）
4）变形
5）动画（过滤动画/帧动画）
6）边框
7）多重背景
8）反射
9）文字
10）颜色（rgba/hsl/hsla）
11）滤镜（filter）
12）弹性布局
13）多列布局
14）盒模型
15）Web字体
16）媒体查询
二）CSS3浏览器不支持时，需要兼容处理
主流浏览器内核： 加厂商前缀：
a）Trident：IE内核 -ms-
b）Gecko：FireFox内核 -moz-
c）Webkit：Chrome（谷歌）/Safari（苹果） -webkit-
d）Blink（Webkit分支）：Chrome（谷歌）/Opera（欧鹏） -o-
Tips（技巧）：国内浏览器大多是双核的（IE内核+Chrome内核）
三）CSS3选择器
1）属性选择器
<style> p[class]{ color:red; //全红 } p[class=content]{ color:red; //只有段落3变红 } p[class^=content]{ color:red; //段落134变红，表示以content开头 } p[class$=content]{ color:red; //段落234变红，表示以content结尾 } p[class*=p]{ color:red; //段落124变红，表示包含p } </style> <div class="container"> <p class="content p1">段落1</p> <p class="p2 content">段落2</p> <p class="content">段落3</p> <p class="content p4">段落4</p> </div>
2）结构性伪类选择器（前面有:）111
:root { //匹配html标签，与body选择器效果一样 background-color: red; } body { background-color: red; } // 匹配父元素中连续的子元素 :first-child：第一个子元素 :last-child：最后一个子元素 :nth-child(n)：第n个子元素 :nth-last-child(n)：倒数第n个子元素 p:first-child{ color:purple; } p:nth-child(2n){ //偶数从头数2的倍数，2，4，6，8 //2n+1奇数 //3n+2 color:purple; }
3）目标伪类
//目标伪类：target：匹配URL指向的元素 p { height:600px; } p:target { color:red; //点击a标签的链接后，实现页内跳转，跳转的p标签变红 } <a href="#jump1">跳转1</a> //页内跳转 <a href="#jump2">跳转2</a> <a href="#jump3">跳转3</a> <p id="jump1">这是段落1的内容</p> //id表示设置的1个锚点，用来实现业内跳转 <div id="jump2">这是段落2的内容</div> //不变哈，不是p标签 <p id="jump3">这是段落3的内容</p>
4）表单（UI）元素状态伪类
input:disabled{ //只有disabled背景才变红 background-color:red; } input:enabled{ //非disabled背景变绿 background-color:green; } input:checked{ //checked只在Opera浏览器有效 color:yellow; } ::selection{ //被选中的文本，注：双冒号 color:yellow; } <p>普通文本</p> //文本被选中后，变色 <form action=""> <input type="text" disabled> <input type="text"> <input type="text"> <input type="checkbox" name="face" checked>党员 <input type="checkbox" name="face">团员 <input type="checkbox" name="face">群众 <select> <option>前端开发</option> <option selected>大数据</option> <option>后端开发</option> </select> </form>
5）否定伪类
否定伪类:not(p) :not(p){ //非p标签 background-color:pink; color:purple; } .container :not(p){ //container下面的，非p标签 background-color:pink; color:purple; }
6）通用兄弟元素选择器
.div1~.div2{ //找div1的兄弟元素 color:red; } <div class="test"> <div class="div1">div1</div> <div class="div2">div2</div> <strong>strong</strong> <div class="div3">div3</div> </div>
四）CSS3文本处理
1）文本阴影
h-shadow{number}：必选，水平阴影的位置，允许负值 v-shadow{number}：必选，垂直阴影的位置，允许负值 blur{number}：可选，模糊的距离 color{color}：可选，阴影的颜色 text-shadow:水平偏移 垂直偏移 模糊 颜色; h1{ text-shadow:2px 3px 5px purple; //主流浏览器都支持 } <h1>这是文本阴影测试</h1>
2）文本自动换行
p{ width:200px; border:1px solid purple; -ms-word-:normal; //normal（默认）只允许在断点处换行 word-wrap:normal; -ms-word-wrap:break-word; //break-word在长单词或URL地址内部进行换行 word-wrap:break-word; } <p>advsafsaewfewsvv gfakksbcsbckabvlLHFLOHLNDlvhlsdvh</p>
3）单词拆分
p{ width:200px; border:1px solid purple; -ms-word-break:normal; //normal（默认）默认换行规则 word-break:normal; -ms-word-break:break-all; //break-all允许在单词内换行 word-break:break-all; -ms-word-break:keep-all; //keep-all只能在半角空格或连字符处换行 word-break:keep-all; } <p>advsafsaewfewsvv gfakksbcsbckabvlL HFLOHLNDlvhlsdvh</p>
4）文本拆分
text-wrap:
normal:只允许换行点进行换行
none:不换行，元素无法容纳的文本会溢出
unrestricted:在任意2字符间切换
suppress:压缩元素中的换行，浏览器只在行中没有其他有效换行点时进行换行
5）文本溢出113 19min
a）单行文本溢出（重要）
text-overflow:clip/ellipsis/string
b）多行文本溢出(IE9以下的版本不支持)
display:-webkit-box; //盒布局
-webkit-box-orient:vertical;
-webkit-line-clamp:行数;
overflow:hidden;
6）
