CSS3的新特性是什么-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

CSS3的新特性是什么

本篇内容主要讲解“CSS3的新特性是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3的新特性是什么”吧!

创新互联公司是一家专注于成都网站设计、做网站、成都外贸网站建设公司与策划设计,海州网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:海州等地区。海州做网站价格咨询:13518219792

1.属性选择器(常用的简单归纳下)

[attribute=value] 用于选取带有指定属性和值的元素。

[title=W3School]{ border:5px solid blue; }

[attribute~=value] 包含指定词汇的元素。后代选择器

[title~=hello] { color:red; }

[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[lang|=en] { color:red; }

Hello!

Hi!

[attribute^=value] 匹配属性值以指定值开头的每个元素。

a[src^="https"]

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

a[src$=".pdf"]

[attribute*=value] 包含指定值的每个元素。

a[src*="abc"]

2.伪类选择器(常用的简单归纳下)

3.颜色

RGBA、HSLA模式

优点:相较opacity,不具有继承性,即不会影响子元素的透明度

HSLA模式

H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。

S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高

L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。

A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。

image.png

4.文字阴影text-shadow、 圆角边框border-radius、阴影box-shadow和倒影box-reflect

text-shadow

image.png

x-shadow 必需。 水平阴影的位置。允许负值。

y-shadow 必需。 垂直阴影的位置。允许负值。

distance 可选。 模糊的距离

color 可选。 阴影的颜色

box-shadow

CSS3新特性总结

x-shadow 必需。阴影水平偏移量,可正可负,正值表示阴影在右边,负值表示阴影在左边。

y-shadow 必需。阴影垂直偏移量,可正可负,正值表示阴影在上边,负值表示阴影在下边。

distance 可选。阴影模糊距离。只能为正值,值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊。

size 可选。阴影扩展半径。可正可负,正值表示整个阴影都延展扩大,负值表示缩小。

color

可选。阴影的颜色。

inset

可选。将外部阴影 (outset) 改为内部阴影。

box-reflect

向框添加一个或多个倒影。

(1)direction:定义倒影的方向,取值包括:

5.CSS3盒模型

6.word-break

image.png

7.text-overflow

image.png

到此,相信大家对“CSS3的新特性是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网页名称:CSS3的新特性是什么
本文URL:http://kswsj.cn/article/jogigh.html

其他资讯