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 | 可选。将外部阴影改为内部阴影 |
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)
相关文章推荐
- CSS(3)__CSS基本用法<div,文档流,浮动>
- css基本用法(层叠、群选择符、派生选择符、颜色值)
- CSS 基本用法
- JS , CSS ,image HTML DOM的加载过程 以及 总结JS的基本用法
- CSS 基本用法
- JAVAWEB-CSS和JS的基本用法
- css before after基本用法【转】
- CSS(4)__CSS基本用法<三种定位>
- CSS(6)__CSS基本用法<2D属性和3D特效>
- CSS背景(background)的基本用法
- css介绍及css的基本用法
- CSS基本语法及用法
- CSS(7)__CSS基本用法<CSS常用属性>
- CSS基本用法(一)
- css 中的position z-index em rem zoom 的基本用法
- CSS 基本用法
- 2016年11月 选择器的基本用法和Css的特性
- HTML基本用法(一) · css将文字在一行中有序排列;
- CSS基本属性用法(不包含代码)
- day14 HTML 表单标签 CSS 基本的用法 CSS 高级用法--定位 CSS 中的基本单位 CSS 3 新特性