您的位置:首页 > Web前端 > CSS

CSS基本用法(二)

2017-09-20 15:00 330 查看

CSS3

CSS3是对CSS2的扩充,删减,优化

结构伪类

选择器功能
E:first-child匹配第一个孩子
E:last-child匹配最后一个孩子
E:nth-child(n)匹配第n个孩子
E:nth-child(2n)或E:nth-child(even)匹配偶数的孩子
E:nth-child(2n+1)或E:nth-child(odd)匹配奇数的孩子
E:only-child匹配有且仅有一个孩子

border-collapse

用来合并表格的边线,其值为:collapse,例如
border-collapse:collapse;


伪元素

选择器功能
:first-letter操作当前元素中第一个字
:first-line操作当前元素中第一个行文字
:before在之前插入,在一个盒子内部的最前面
:after在之后插入,在一个盒子内部的最后面

文本阴影

text-shadow:水平阴影、垂直阴影、模糊举例、阴影颜色

向文本添加一个或者多个阴影,为逗号分隔的阴影列表,每个阴影由2个到3个长度值和1个可选的颜色值组成,省略的长度为0。

描述
h-shadow必需。水平阴影的位置。允许负值
v-shadow必须。垂直阴影的位置。允许负值
blur可选。模糊的距离
color可选。阴影的颜色
描述:

text-shadow 文字阴影可以有多组值,多组之间用逗号隔开就可以

h-shadow 水平阴影正值阴影在右边 负值在左边

v-shadow垂直阴影正值在下边,负值在上边

blur 模糊强度,值越大越模糊

盒子阴影

box-shadow:水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影

水平阴影和垂直阴影必需,其他可以省略
语法
box-shadow:h-shadow v-shadow blur spread color inset

注释:向框添加一个或者多个阴影,为逗号分隔的列表,每个阴影由2-4个长度值、可选的颜色以及可选的inset关键词来规定。省略的长度值为0。

描述
h-shadow必需。水平阴影的位置。允许负值
v-shadow必需。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影尺寸
color可选。阴影颜色
inset可选。将外部阴影改为内部阴影
box-shadow 盒子阴影可以有多组值,以逗号隔开

h-shadow 水平阴影正值在右边,负值在左边<
4000
/li>
v-shadow 垂直阴影正值在下边,负值在上边

blur 模糊尺寸,值越大越模糊

圆角矩形

border-radius 值的顺序为: 左上 右上 右下 左下;值一样时写为一个值。单位px;

CSS透明度

有颜色的标签可以设置透明度:格式为rgba(红色,绿色,蓝色,透明度)
a:透明度,值为0到1,0表示完全透明,1表示完全不透明。
- 背景颜色透明 background-color:rgba(255,255,255,0.3)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: