千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > CSS3有哪些特性?

CSS3有哪些特性?

来源:千锋教育
发布人:xqq
时间: 2023-10-13 11:56:19 1697169379

一、CSS3的特性

1、圆角(border-radius)

在CSS3中,可以用border-radius属性来设置元素的圆角效果。这个属性可以用来为元素的四个角分别设置圆角,也可以设置所有角的圆角。通过这个属性,我们可以方便地实现圆角按钮、圆角图片等效果。

2、盒阴影(box-shadow)

CSS3中的box-shadow属性可以为元素设置盒阴影效果。这个属性有多个参数,可以控制阴影的颜色、大小、偏移量等。通过这个属性,我们可以实现更加生动的元素效果,如按钮被按下时出现阴影效果。

3、文字阴影(text-shadow)

类似于盒阴影,CSS3中的text-shadow属性可以为文本设置阴影效果。这个属性也有多个参数,可以设置阴影的颜色、大小、偏移量等。通过这个属性,我们可以为文本添加更加炫酷的效果,如立体文字效果等。

4、媒体查询(media queries)

CSS3中的媒体查询功能可以根据不同的设备或浏览器宽度来为不同的屏幕设置不同的CSS样式。通过这个功能,我们可以为手机、平板和电脑三种不同的设备设计不同的页面布局和样式。

5、渐变(gradients)

CSS3中的渐变功能可以为文本和盒子设置渐变颜色效果。这个属性有两种类型,即线性渐变和径向渐变。通过这个属性,我们可以实现流畅的颜色渐变效果,如渐变按钮等。

6、动画(animations)

CSS3中的动画功能可以为元素添加动态效果,如渐变颜色、旋转、移动等。这个属性需要使用@keyframes关键字来定义动画的过程和终止状态。通过这个属性,我们可以为网页添加更加活泼和生动的元素效果。

7、过渡(transitions)

类似于动画,CSS3中的过渡功能可以为元素添加平滑的过渡效果,如从无到有、颜色变化等。这个属性需要设置过渡的属性、过渡时间以及过渡的缓动函数。通过这个属性,我们可以给元素添加更加自然的过渡效果。

二、CSS3选择器

1、属性选择器

E[attr]:只使用属性名,但没有确定任何属性值;E[attr=”value”]:指定属性名,并指定了该属性的属性值;E[attr~=”value”]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写E[attr^=”value”]:指定了属性名,并且有属性值,属性值是以value开头的;E[attr$=”value”]:指定了属性名,并且有属性值,而且属性值是以value结束的E[attr*=”value”]:指定了属性名,并且有属性值,而且属值中包含了value;E[attr|=”value”]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

2、伪类选择器

结构性伪类选择器X:first-child 匹配子集的名列前茅个元素。IE7就可以支持X:last-child匹配父元素中最后一个X元素X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素XX:only-of-type匹配属于同类型中少数兄弟元素的XX:first-of-type匹配同级兄弟元素中的名列前茅个X元素X:nth-last-child(n)从最后一个开始算索引。X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素XX:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTMLX:empty匹配没有任何子元素(包括包含文本)的元素X目标伪类选择器E:target 选择匹配E的所有元素,且匹配元素被相关URL指向UI 元素状态伪类选择器E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素E:checked 匹配所有用户界面(form表单)中处于选中状态的元素EE:selection 匹配E元素中被用户选中或处于高亮状态的部分语言伪类选择器lang eg:E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。否定伪类选择器E:not(s) (IE6-8浏览器不支持:not()选择器。)匹配所有不匹配简单选择符s的元素E动态伪类选择器E:link:链接伪类选择器,选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过,常用于链接描点上。E:visited:链接伪类选择器,选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过,常用于链接描点上。E:active:用户行为选择器,选择匹配的E元素,且匹配元素被激活,常用于链接描点和按钮上。E:hover:用户行为选择器,选择匹配的E元素,且用户鼠标停留在元素E上,IE6及以下浏览器仅支持a:hover。E:focus:用户行为选择器 选择匹配的E元素,而且匹配元素获取焦点。层级选择器E>F:子选择器,选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素。E F:相邻兄弟选择器,选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面。E~F:通用选择器,选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素。

延伸阅读1:CSS3

CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT