热门关键字:
jquery > jquery教程 > css3 > CSS3新特性总结

CSS3新特性总结

228
作者:管理员
发布时间:2020/5/20 10:32:00
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1683
1.属性选择器(常用的简单归纳下)
[attribute=value] 用于选取带有指定属性和值的元素。
[title=W3School]{ border:5px solid blue; }
[attribute~=value] 包含指定词汇的元素。后代选择器
[title~=hello] { color:red; }
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[lang|=en] { color:red; }<p lang="en">Hello!</p><p lang="en-us">Hi!</p>
[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新特性总结
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
友荐云推荐