CSS3学习笔记1-选择器和新增属性 - xinyiyake_H5之家

前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，学习的不算系统，所以知识点涵盖的不甚全面，望各位看官不吝指正批评。

CSS3简介

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

css3现状

CSS3新增选择器

1.属性选择器新增

2.伪类选择器

:nth-of-type使用方法与:nth-child类似。

3.其他选择器

伪元素before after

作用：渲染一个虚拟的标签插入到当前元素的内部前面或后面

总结：

圆角 border-radius

实现元素的圆角化，使用方式与border、padding和margin类似，可以合写，也可以单独设置。

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>dcocument</title> <style> ul{margin:0;padding:0;} li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;} .test .one{border-radius:10px;} .test .two{border-radius:10px 20px;} .test .three{border-radius:10px 20px 30px;} .test .four{border-radius:10px 20px 30px 40px;} .test2 .one{border-radius:10px/5px;} .test2 .two{border-radius:10px 20px/5px 10px;} .test2 .three{border-radius:10px 20px 30px/5px 10px 15px;} .test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;} </style> </head> <body> <h2>水平与垂直半径相同时：</h2> <ul class="test"> <li class="one">提供1个参数<br />border-radius:10px;</li> <li class="two">提供2个参数<br />border-radius:10px 20px;</li> <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li> <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li> </ul> <h2>水平与垂直半径不同时：</h2> <ul class="test2"> <li class="one">提供1个参数<br />border-radius:10px/5px;</li> <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li> <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li> <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li> </ul> </body> </html> 阴影box-shadow