CSS3新增属性总结
来源:互联网 发布:政府机构的域名 编辑:程序博客网 时间:2024/06/17 20:47
一、选择器
1、属性选择器:
- p[index]{background:red} //只使用属性名,但没有确定任何属性值
- p[index=1]{background:red} //指定属性名,并指定了该属性的属性值
- p[index~=pre]{background:red} //指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
- p[index^=p]{background:red} //指定了属性名,并且有属性值,属性值是以value开头的
- p[index$=M]{background:red} //指定了属性名,并且有属性值,而且属性值是以value结束的
- p[index*=d]{background:red} //指定了属性名,并且有属性值,而且属值中包含了value
- p[index|=d]{background:red} //指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)
2、结构性伪类
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
3、伪类
- E:target 表示当前的URL片段的元素类型,这个元素必须是E
- E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件
- E:checked 表示已选中的checkbox或radio
- E:first-line 表示E元素中的第一行
- E:first-letter 表示E元素中的第一个字符
- E::selection表示E元素在用户选中文字时
- E::before 生成内容在E元素前
- E::after 生成内容在E元素后
- Content 属性
- E:not(s) 表示E元素不被匹配
- E~F表示E元素毗邻的F元素
二、颜色模式
三、文字阴影与描边
1、文字阴影
光晕效果:color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
层叠效果:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
浮雕效果:color:white; font-size:100px; font-weight:bold; text-shadow:2px 2px 4px #000;
2、文字描边:只有webkit内核支持
-webkit-text-stroke:宽度 颜色
四、新增文本功能(全兼容)
1、direction 定义文字排列方式(全兼容)
- rtl 从右向左排列
- ltr 从右向左排列
- 注意要配合unicode-bidi:bidi-override; 一块使用
2、text-overflow 定义省略文本的处理方式
- clip 无省略号
- Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
column-count :表示有几列
例: div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
- column-gap :列与列之间的间隙
- 例: div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
} - column-rule-style :列边框
- 例: div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
} - column-rule-width:两列的边框厚度
- 例: div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
} - column-rule-color :两列的边框颜色
- 例: div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
} - column-rule : column-rule-* 所有属性的简写。
- column-span: 跨越所有列
- column-width:指定了列的宽度。
实例 从上到下的线性渐变:
#grad{
background: -webkit-linear-gradient(red,blue);/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red,blue);/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red,blue);/* Firefox 3.6 - 15 */
background:linear-gradient(red,blue);/* 标准的语法 */
}
CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,
它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。下面的实例演示了从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色:
实例 从左到右的线性渐变,带有透明度:
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
径向渐变的实例:
#grad{
background: -webkit-radial-gradient(red,green,blue);/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red,green,blue);/* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red,green,blue);/* Firefox 3.6 - 15 */
background:radial-gradient(red,green,blue);/* 标准的语法 */
}
- background-image:不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
- background-size:您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
- background-origin:指定了背景图像的位置区域。
- background-clip:背景剪裁属性是从指定位置开始绘制。
弹性容器内包含了一个或多个弹性子元素。注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。以下元素展示了弹性子元素在一行内显示,从左到右:
display指定 HTML 元素盒子类型。flex-direction指定了弹性容器中子元素的排列方式justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式。align-items设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。flex-wrap设置弹性盒子的子元素超出父容器时是否换行。align-content修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐flex-flowflex-direction 和 flex-wrap 的简写order设置弹性盒子的子元素排列顺序。align-self在弹性子元素上使用。覆盖容器的 align-items 属性。flex设置弹性盒子的子元素如何分配空间。- CSS3新增属性总结
- css3新增属性总结1
- CSS3-新增属性选择器
- [CSS3] 新增属性
- css3 新增属性
- css3 新增属性集合
- CSS3 新增文本属性
- CSS3新增颜色属性
- css3新增属性
- CSS3新增的属性
- CSS3新增基础属性
- 【8】CSS3新增属性
- CSS3新增文本属性
- css3.0新增属性
- CSS3新增属性
- CSS3新增常用属性
- CSS3新增属性
- css3新增属性
- ubuntu 14.04-LTS 系统下安装搜狗输入法
- Linux下tomcat部署图片服务器与 vsftpd搭建
- easydss与linux内核接收网络数据流程(三)
- 《python第8章习题》
- 转载 stuts2与spring集成
- CSS3新增属性总结
- 【腾讯TMQ】【Android场景化性能测试专栏】CPU耗电性能篇
- idea 使用搜狗输入法中文卡字的问题
- [Java--常见排序算法]------堆排序 (Heap Sort)
- python的文件处理
- navicat for java设计表时长度的作用
- logstash日志分析的配置和使用
- ubantu install mongo
- 关于Retrofit2.0Get和Post请求的简单使用(小白适用)