电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

详细分析关于CSS3中自订的特性

2021-01-27 23:27:08 出处:[ 菜菜电脑网 ] 人气:次阅读
录:由于CSS3的新特性较多,所以分两篇博文来说明了。第一篇主要以外新的选择器、文字及块阴影、多背景图、颜色可视、圆角等。第二篇主要细说CSS3的各种动画效果,如:翻转、移动、纹理等,还包括图标字体的分析方法。

CSS3属性选择器:

a[href$=‘.pdf’] 问到 href属性中以.pdf结尾的被选上

a[href^=‘mailto’] 回应href属性中以mailto简短的被选入

a[href*=‘item’] 回应href属性中带有item的都被选上

其中a只是指代元素标签

现有三个p,他们的属性name的值各并不相同:

样式如下:

投身于选择器:

效果:

再转至一属性选择器:

效果:

选择器的用法坚信大家已经比较精准了,这里也比较简单就不再赘述了。这种属性选择器比较多用在href属性中,通过格式化文件名的不尽相同后缀名来显然附加的同样,如:.jpg .png .gif等等。

CSS3伪类选择器:

现有一表格如下:

转入伪类选择器:

:nth-of-type可以通过参数来考虑表格的奇数;大或偶数行,odd代表奇数行,even代表偶数行。

效果:

:nth-child伪类,同样是用来必需行。参数为n时试演所有行,参数为n+i时坚称从第i行开始下面的都被看中,2n问到2的倍数讫被看中,即偶数行,3n声称3的倍数自为被选上。

效果:

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-:Microsoft的IE浏览器。

虽然一个直观的样式就要写就五遍,但做网页的兼容性本就是前端工程师的职责。下面每一个特性在实际编纂网页时均要按照示例来写到,最主要第二篇博文中的动画特性。

文字阴影:

这里先所写一个h1标签,内容是我老师更喜欢用的一句话,大家不要吐槽了...

用字:

文字阴影包含4个参数,1.外侧偏移量 2.交叉偏移量 3.模糊不清半径(数值越高越清晰,反之越模糊不清)4.阴影颜色

效果:

设置很大的偏移量可以产生飘浮并有投影的效果:

像不像有光打下来?

设置多个阴影,用逗号分开。单纯半径逐渐升高,产生辉光效果。

灯箱的感觉

设置多个阴影,转轴方向各不相同,设置适当的颜色产生浮雕效果。

块级阴影:

块阴影可以应用于许多块级元素上

现给一p连带块阴影:

效果:

box-shadow有6个参数。1.投影方式(可选),不寄给可选外部阴影,inset代表内阴影 2&3.透露偏移量,与文字阴影值得注意 4.模棱两可半径(可选)5.阴影扩张半径(可选),值越大阴影范围越大 6.阴影颜色

内阴影效果:

现有一红色圆形:

补足多级块阴影,扩展到半径逐渐增高:

太阳就出来了

圆角:

圆角这一特性系统设计非常最常,还可以用圆角来描画圆形。

应用于p上:

效果:

border-radius参数可以是1到4个:

1个参数问到四个角都分析方法该值;

2个参数坚称左上、右下用第一个值,右上、左下用第二个值;

3个参数指出左上用第一个值,右上、左下用第二个值,右下用第三个值;

4个参数坚称四个值依次用在左上、右上、右下、左下(逆时针)。

一般1个和4个参数用的较多,其他的有点蛋疼。

四个参数:

效果:

这样的圆角怎么做?

很有用,只必须让圆角的值也就是说这个p块高度的一半即可:

隐含出用圆角画圆:

先自建一正方形p块,让其圆角值大于之和其边长的一半即可,上面例子中的太阳就是按此方法做到的。

交错:

渐进分作两种:线性、径向叠加

线性:

由于绘制可视时,时会被浏览器解析踏入一张背景图片,所以动手叠加时要请注意backgroud-image。

渐进第一个参数为Pardosa方位:left透露从左到右 top回应从上到下,以此类推。之后可以设置多个颜色,颜色后可以设置渐进的在在后方(用百分比)。

效果:

径向渐进,顾名思义,是按圆的半径方向交错:

center透露从中心开始交替

又一个太阳出来了,忽略这可不是用阴影做到的,而是径向过渡。

【特别举荐】

1. CSS3免费视频教程

2. 个人一个CSS3的动画库

3. CSS3深造之Animation编纂者

4. CSS3教学之动画制作修习

5. 古今中外关于css3的新特性

以上就是详细分析关于CSS3中升级的特性的具体内容,更多特地追捧php中文网其它就其文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152