注:由于CSS3的新特性较多,所以分两篇博文来说明。第一篇主要包括新的选择器、文字及块阴影、多背景图、颜色渐变、圆角等。第二篇主要细说CSS3的各种动画效果,如:旋转、移动、缩放等,还包括图标字体的应用。

CSS3属性选择器:

a[href$=‘.pdf’] 表示 href属性中以.pdf结尾的被选中
a[href^=‘mailto’] 表示href属性中以mailto开头的被选中
a[href*=‘item’] 表示href属性中含有item的都被选中
其中a只是指代元素标签
现有三个div,他们的属性name的值各不同:
样式如下:
加入选择器:
效果:
再加入一属性选择器:
效果:
选择器的用法相信大家已经比较熟练了,这里也比较简单就不再赘述了。这种属性选择器比较多用在href属性中,通过载入文件名的不同后缀名来做出相应的选择,如:.jpg .png .gif等等。
 
CSS3伪类选择器:
现有一表格如下:
 
加入伪类选择器:
:nth-of-type可以通过参数来选择表格的奇数行或偶数行,odd代表奇数行,even代表偶数行。
效果:
 
 
的倍数行被选中,即偶数行,的倍数行被选中。
效果:
n+i:
 
2n:
 
3n:
 
 
还有一个:nth-last-child()伪类,用法和nth-child基本一致,只是所有规则都是从下往上数的,就相当于把表倒个个。这里也没必要多说了,有兴趣的读者可以自己试下。
 
多背景图:
CSS3中backgroud-image可以设置多个背景图,还可以设置每个背景图的位置。
 
每个背景图有四个参数,1.url地址 2.上下位置,包括top center bottom,也可用百分比 3.左右位置,包括left center right,也可用百分比
4.重复方式,包括no-repeat repeat-y repeat-x。很好理解,就是不平铺、纵向平铺、横向平铺。
(这里偷个懒没截图,读者们可以拿自己喜欢的图片尝试下)
 
----------------------------------------------------------------------------我是分割线------------------------------------------------------------------
从这里开始就要注意了,由于不同内核的浏览器对CSS3的支持程度是不同的,所以之后的所有特性均要加上前缀。
在下面的例子中,博主为了节省时间没有加前缀或只加了-webkit-前缀。
具体写法如下:
 
-webkit-:webkit核心的浏览器,也就是谷歌的Chrome浏览器;
-moz-:Gecko核心的浏览器;
-o-:Opera浏览器;
-ms-:微软的IE浏览器。
虽然一个简单的样式就要写五遍,但做好网页的兼容性本就是前端工程师的职责。下面每一个特性在实际编写网页时均要按照示例来写,包括第二篇博文中的动画特性。
 
文字阴影:
这里先写一个h1标签,内容是我老师喜欢用的一句话,大家不要吐槽了...
写法:
文字阴影包括4个参数,1.横向偏移量 2.纵向偏移量 3.模糊半径(数值越高越模糊,反之越清晰)4.阴影颜色
效果:
 
设置较大的偏移量可以产生漂浮并有投影的效果:
像不像有光打下来?
 
设置多个阴影,用逗号隔开。模糊半径逐渐增大,产生辉光效果。
灯箱的感觉
 
设置多个阴影,偏移方向各不相同,设置合适的颜色产生浮雕效果。
 
 
块级阴影:
块阴影可以应用于许多块级元素上
现给一div加上块阴影:
 
效果:
box-shadow有6个参数。1.投影方式(可选),不写默认外部阴影,inset代表内阴影 2&3.表示偏移量,与文字阴影类似 4.模糊半径(可选)5.阴影扩展半径(可选),值越大阴影范围越大 6.阴影颜色
内阴影效果:
现有一红色圆形:
加上多级块阴影,扩展半径逐渐增大:
太阳就出来了
 
圆角:
圆角这一特性应用非常广泛,还可以用圆角来画圆形。
应用于div上:
 
效果:
 
border-radius参数可以是1到4个:
1个参数表示四个角都应用该值;
2个参数表示左上、右下用第一个值,右上、左下用第二个值;
3个参数表示左上用第一个值,右上、左下用第二个值,右下用第三个值;
4个参数表示四个值依次用在左上、右上、右下、左下(逆时针)。
一般1个和4个参数用的较多,其他的有点蛋疼。
四个参数:
效果:
这样的圆角怎么做?
很简单,只需要让圆角的值等于这个div块高度的一半即可:
引申出用圆角画圆:
先建一正方形div块,让其圆角值大于等于其边长的一半即可,上面例子中的太阳就是按此方法做出的。
 
渐变:
渐变分为两种:线性渐变、径向渐变
线性渐变:
 
由于绘制渐变时,会被浏览器解析成为一张背景图片,所以做渐变时要用到backgroud-image。
渐变第一个参数为起始位置:left表示从左到右 top表示从上到下,以此类推。之后可以设置多个颜色,颜色后可以设置渐变的起始位置(用百分比)。
效果:
 
径向渐变,顾名思义,是按圆的半径方向渐变:
center表示从中心开始渐变
又一个太阳出来了,注意这可不是用阴影做的,而是径向渐变。
 
感谢您的浏览,希望能对您有所帮助,CSS3新特性第二篇会在近期发表。

CSS3新增特性详解(一)的更多相关文章

  1. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  2. C#各个版本中的新增特性详解

    序言 自从2000年初期发布以来,c#编程语言不断的得到改进,使我们能够更加清晰的编写代码,也更加容易维护我们的代码,增强的功能已经从1.0搞到啦7.0甚至7.1,每一次改过都伴随着.NET Fram ...

  3. C#各个版本中的新增特性详解【转】

    序言 自从2000年初期发布以来,c#编程语言不断的得到改进,使我们能够更加清晰的编写代码,也更加容易维护我们的代码,增强的功能已经从1.0搞到啦7.0甚至7.1,每一次改过都伴随着.NET Fram ...

  4. 【PHP系列】PHP 7.0新增特性详解

    开始介绍PHP7.0新特性,具体的可以参照官网的介绍,我来挑一些给大家详细讲解下 http://php.net/manual/en/migration70.new-features.php 1. ?? ...

  5. MySQL 8.0新增特性详解【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  6. PHP 7.0新增特性详解

    https://www.cnblogs.com/riverdubu/archive/2017/03/22/6434705.html 开始介绍PHP7.0新特性,具体的可以参照官网的介绍,我来挑一些给大 ...

  7. CSS3新特性详解

    本文讲解CSS3相关实用知识点 CSS3相关实用知识点目录 边框设置 颜色设置 背景设置 渐变使用 超出文本设置 阴影设置 CSS3变换设置 过渡设置 动画设置 多列布局 BoxSizing设置 弹性 ...

  8. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  9. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

随机推荐

  1. Aiseesoft Data Recovery 1.1.6 专业数据恢复软件破解版

    Aiseesoft Data Recovery是专业的数据恢复软件,它可以帮助你恢复几乎所有删除/丢失的文件,如照片,文件,电子邮件,音频,视频且支持从计算机,硬盘驱动器,闪存驱动器,存储卡,数码相机 ...

  2. Collection集合 总结笔记

    2:Set集合(理解)     (1)Set集合的特点         无序,唯一     (2)HashSet集合(掌握)         A:底层数据结构是哈希表(是一个元素为链表的数组)     ...

  3. saltstack-把执行结果存储到mysql服务内

    saltstack把执行的结果保存到mysql中,以便进行命令安全审计 mysql负责存储数据,mysql-python负责收集数据 master需要安装mysql和MySQL-python,mini ...

  4. APUE4.4设置用户ID和设置组ID && 4.5文件访问权限

  5. 只要下面看到func() 带括号的,就会弹上去找对应的函数,然后执行相应的函数块

    def func1(): print("呵呵")def func2(): print("呵呵")def func3(): print("呵呵" ...

  6. FtpWebRequest与FtpWebResponse完成FTP操作

    WebRequestMethods.Ftp类: 表示可与 FTP 请求一起使用的 FTP 协议方法的类型. Append​File    表示要用于将文件追加到 FTP 服务器上的现有文件的 FTP ...

  7. CSS控制列表与导航的制作

    <style type="text/css"> /*body默认是有边距的*/ body{ margin:0;} /*ul默认是有边距的所以先将边距去掉IE78只要加上 ...

  8. 最长公共子序列&最长公共子串

    首先区别最长公共子串和最长公共子序列  LCS(计算机科学算法:最长公共子序列)_百度百科 最长公共子串,这个子串要求在原字符串中是连续的.而最长公共子序列则并不要求连续. 最长公共子序列: http ...

  9. c++ 浅拷贝和深拷贝 指针和引用的区别 malloc(free)和new(delete)的区别 重载重写重定义

    4.malloc(free)和new(delete)的区别 malloc()函数: 1.1 malloc的全称是memory allocation,中文叫动态内存分配. 原型:extern void ...

  10. python HtmlTestRunner python2.x python3.x报告优化模板源码下载

    文件py压缩包下载地址https://files.cnblogs.com/files/SunshineKimi/HtmlTestRunner2.x_3%2Cx.rar 源码拷贝如下: python 2 ...