Skip to content

CSS3

Jump to bottom Edit New page
sindorei edited this page Jul 26, 2015 · 3 revisions

选择器

五大类：基本选择器、层次选择器、伪类选择器、伪元素、属性选择器

  • 基本选择器： * 通配符 E 元素选择器 #id id选择器 .class 类选择器 selector1,selectorN 群组选择器
  • 层次选择器：E F 后代选择器 E>F 子选择器 E+F 相邻兄弟选择器 E~F 通用兄弟选择器 （除后代选择器，其他需ie7及以上版本）
  • 伪类选择器：
  • 动态伪类选择器 E:link E:visited E:active E:hover E:focus
  • 目标伪类选择器 :target 选取链接的目标元素 只有存在url指向该匹配元素时，样式才会生效 （ie9+）
  • 语言伪类选择器 E:lang(language)
  • UI元素状态伪类选择器 E:checked 选中状态 匹配选中的复选框或单选按钮表单元素 E:enabled 启用状态 匹配所以启用的表单元素 E:disabled 不可用状态 匹配所以禁用的表单元素
  • 结构伪类选择器 （ie9+）
    • E:first-child
    • E:last-child E:root 选择元素E所在文档的根元素 html文档中，根元素始终为html E F:nth-child(n) E F:nth-last-child(n) 倒数 E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素 E:nth-last-of-type(n) E:first-of-type E:last-of-type E:only-child 只包含一个子元素，且该子元素匹配E元素 E:only-of-type 只包含一个同类型的子元素 E:empty 没有子元素的元素，而且该元素也不包含任何文本节点
  • 否定伪类选择器 :not() input:not([type=radio]) li:not(:hover)
  • 伪元素 css3中伪元素有::2个冒号，主要用来区别伪类和伪元素，ie6-8仅支持单冒号表示法 ::first-letter 第一个字母 ::first-line 第一行文本 ::before ::after ::selection 用来匹配突出显示的文本 选中网站上的文字时的样式 仅接受2个属性，background 和 color
  • 属性选择器 (ie7+) E[attr] E[attr=val] E[attr|=val] attr属性值是一个具有val或者以val-开始的属性值 E[attr~=val] 属性列表中有val E[attr*=val] 属性值中包含val E[attr^=val] E[attr$=val]

边框

border: border-width border-style border-color
没有先后顺序 其中border-style是必须的

边框类型：

  • none 无边框
  • hidden 与none相同，不过应用于表时除外，对于表hidden用于解决边框冲突
  • dotted 点状边框
  • dashed 虚线边框
  • solid 实线边框
  • double 双线 双线的宽度等于border-width的值
  • groove 定义3d凹槽边框，其效果取决于border-color的值
  • ridge 定义3D 垄状边框
  • inset 定义3Dinset边框
  • outset 定义3d outset边框
  • inherit 从父元素继承边框样式 ，部分浏览器不支持这个属性

border-color border-color: [ | transparent ] {1,4} | inherit border-top-colors 需把标准写法拆分成四个边框，使用多颜色才会有效果 每种颜色一像素，如果宽度大于颜色数量，最后一种颜色用于显示剩下的宽度 border-image border-image:none | [ | ] {1,4} [/ {1,4}] ?[stretch | repeat | round] {0,2}

分解阐述（实际应用中是不能分解的）

  • 引入背景图片： border-image-source
  • 切割引入背景图片:border-image-slice
  • 边框图片的宽度： border-image-width
  • 边框图片的排列方式： border-image-repeat border-image-source border-image-source: url(image url) 默认为none border-image-slice border-image-slice:[ | ] {1,4} && fill ? 取值支持数值和百分比，数值没有单位默认为px。 百分比相对于边框背景图片而言的 fill 使用了这个关键字，图片边界的中间部分将保留下来。默认情况为空 特性：将边框背景图片切成9份，再像background-image一样重新布置 border-image-width border-image-width: [ | | | auto ] {1,4} border-image-repeat border-image-repeat: [ stretch | repeat | round] {1,2} 默认是 stretch 最多2个值，第一个水平方向 第二垂直方向
    设置一个值时，表示水平和垂直相同 不管什么排列方式，背景图片的四个角都不变（盲区）

使用border-image制作需要掌握三点： 源图片制作恰当 动刀切边框背景图片合理 边框宽度配合到位

border-radius border-radius: none | {1,4} [/{1,4}] 反斜杠 / 前面的值时水平方向半径，后面的值时垂直方向半径 length 由浮点数字和单位标识符组成的长度值，不可以是负值

如果要重置元素的圆角，取值为none并无效果，需要将元素的border-radius取值为0

和border 类似，可以单独拆开设置： border-top-right-radius: /

Gecko内核浏览器 （Firefox、flock等）写法： -moz-border-radius-topleft: /

border-radius 半径值小于或等于border的厚度时，元素边框内部就不具有圆角效果 border-radius 内边半径等于外边半径减去对应的边框宽度

表格应用圆角时： 当表格的border-collapse属性为separate时，表格圆角才能正常显示 第三方插件：ie-css3.js pie

圆形： 元素的宽度和高度相同 圆角的半径值为宽度的一半，或50% 半圆： 制作上半圆和下半圆，元素的宽度是高度的2倍，而且圆角半径值为元素的高度值 制作左半圆和右半圆，元素的高度是宽度的2倍，而且圆半径值为元素的宽度值 扇形： border-radius 制作四分之一圆形 三同，一不同 元素的宽度、高度和圆角半径相同 圆角位置不同 椭圆： 元素宽度是高度的2倍，border-radius的水平半径是宽度的值（至少是宽度的一半），垂直半径是高度的值（至少是高度的一半），垂直椭圆相反

阴影属性

box-shadow: none | [ inset x-offset y-offset blur-radius spread-radius color],[ inset x-offset y-offset blur-radius spread-radius color] 可设置多个投影，用逗号隔开

inset 可选，默认为外阴影 box-shadow: 阴影类型 阴影水平偏移量 阴影垂直偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

阴影扩展版就可以为负值，正值阴影扩大，负值阴影缩小

水平偏移 正值 为右阴影 负值为左阴影 垂直偏移 正值为底阴影 负值为顶阴影

利用这种特性可以制作单边阴影

box-shadow: 0 0 2px #ccc; 只设置 阴影模糊半径和扩展半径来实现四边阴影

也可以只设置 扩展半径来设置四边阴影，并且可以实现边框的效果，但是不计入元素的宽度

层次关系 ，由下到上 外阴影 -> 背景色 -> 背景图片 -> 内阴影 -> 边框

只设置扩展半径 不设置模糊半径 配合多个阴影颜色 可以制作多色边框效果

背景 主要包括五个属性

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-attachment: scroll | fixed 默认为scroll 设置fixed 时，一般运用在html或body标签上，使用在其他标签上不能达到固定效果

新增属性

  • background-origin 指定绘制背景图片的起点
  • background-clip 指定背景图片的显示范围
  • background-size 指定背景图片的 尺寸大小
  • background-break 指定内联元素的背景图片进行平铺时的循环方式

background-origin 改变background-position 的起始位置 background-origin: padding || border || content 新版本浏览器下，一种新的语法： background-origin: padding-box || border-box || content-box

background-clip 背景裁切属性 定义背景图像的裁剪区域 background-clip: border-box || padding-box || content-box 在Gecko内核浏览器（firefox 3.6及之前）不支持content-box 用 border padding替代标准语法中的border-box padding-box

webkit内核下background-clip 还有个text属性 -webkit-background-clip: text -webkit-text-fill-color:transparent 可制作背景图片填充文本的效果

background-origin 和 background-clip 都可设置多个属性值，以逗号隔开

background-size 背景尺寸属性 background-size: auto || || || cover || contain

cover: 将背景图片放大铺满整个容器 contain : 保持背景图片本身的宽高比，将图片缩放到宽度或高度正好适应所定义背景的容器的区域

取值时，可以设置2个值，只取一个值时，是指定宽度，第二个值是高度，相当于auto

background-size:cover 配合 background-position: center 可以制作满屏背景效果

background-bread 内联元素背景图片平铺循环方式 仅firefox支持 -moz-background-inline-policy 3个属性值： bounding-box each-box continuous

多背景语法及参数 background: [background-image] | [background-position] [/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] , *

可拆解： background-image:url1,url2 background-repeat: repeat1,repeat2

除了backgrou-color 以外，去itde属性都可以设置多个属性，前提有多个背景图，多个属性用逗号隔开

文本 css文本功能主要分三大类：字体、颜色和文本 font-style 定义字体的类型 font-weight 定义字体粗细 font-size-adjust 定义是否强制对文本使用同一尺寸 font-stretch 定义是否横向拉伸变形字体 font-variant 定义字体大小写 normal 默认值、small-caps 小型大写（大小跟小写一样，但字母是大写） 复合属性 font font: font-style font-weight font-size/line-height font-family(必需要有)

文本类型有11个属性：
  • word-spacing 定义词与词之间的间距 默认值：normal 。 length 可以是负数
  • letter-spacing 定义字符之间的间距
  • vertical-align 定义文本的垂直对齐方式 baseline（默认）sub 上标对齐 super 下标对齐 bottom 行框底端对齐 text-bottom 行内文本底端对齐 top 顶端对齐 middle 居中对齐 百分比 长度
  • text-decoration 定义文本的修饰线 none underline overline line-through blink（闪烁线）
  • text-indent 定义文本首行缩进 长度 和 百分比
  • text-align 定义文本水平对齐方式 left center right justify（2端对齐）
  • line-height 文本行高 normal 长度值 百分比值 数字
  • text-transform 文本大小写 none uppercase lowercase capitalize 首字母大写
  • text-shadow 文本阴影
  • white-space 定义如何处理文字间的空白 normal 默认 空白会被浏览器忽略
  • pre 空白会被浏览器保留 类似 html 中的 
    标签
  • nowrap 文本不会换行 直到遇到br标签
  • pre-wrap 保留空白符 但是正常地进行换行
  • pre-line 合并空白符，但是保留换行符
  • inherit 继承
  • direction 文本流入的方向 ltr rtl从右到左 inherit

text-shadow： text-shadow: [颜色] x轴位移 y轴位移 模糊半径，* 阴影颜色，可以放在第一，也可以放在最后 可设置多个值

text-overflow clip ellipsis 配合 white-space:nowrap 和 overflow:hidden 指定宽度 word-wrap: word-wrap: normal | break-word normal 默认值，浏览器只在半角空格或连字符的地方进行换行。 break-word 将内容在边界内换行(不截断英文单词换行，对于超长的英文文本会截断换行，即英文文本一行放不下)

word-break: 用于设置或检索对象文本的字内换行行为，在出现多种语言的情况下尤为有用 word-break: normal | break-all | keep-all

normal 默认值 根据语言自己的规则确定换行方式，中文到边界上的汉字换行，英文从整个单词换行 break-all 可以强行截断英文单词，达到词内换行效果 keep-all 不允许字断开

盒模型 box-sizing box-sizing: content-box | border-box | inherit 内容溢出属性： overflow-x overflow-y overflow-x: visible | hidden | scroll | auto | no-display | no-content visible 默认值 内容超出时，不剪切 不添加滚动条 auto 需要剪切时，添加滚动条 hidden 隐藏 不添加滚动条 scroll 显示滚动条，不管有没有溢出 no-display 内容溢出时不显示元素 类似添加 display:none no-content 类似添加 visibility:hidden resize resize: none | both | horizontal | vertical | inherit outline outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit outline-offset 轮廓偏移量 正数向外偏移 负数向内偏移 （？？在360下测试offset 无效）

伸缩布局盒模型 flexbox flex容器会使子项扩展来填满可用空间，或缩小它们以防止溢出容器 旧版 display:box display:inline-box 2009 混合版本（过渡版）：display:flexbox display:inline-flexbox 2011 最新版本 display:flex display:inline-flex

多列布局

渐变 理论上可在任何使用url()值的地方采用，目前为止仅在背景图片中得到完美的支持 ie滤镜： filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#Color',endColorstr='#Color'); /* IE 6 和 IE 7*/

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#Color',endColorstr='#Color')"; /* IE 8*/ GradientType 设置渐变方向，1 水平线性 0 垂直线性 startColor 和 endColor 设置开始和结束时的颜色和透明度 为十六进制正整数

w3c标准线性渐变语法 linear-gradient:([ [ | to ,] ]?[,]+) 第一个参数 指定渐变的方向： 通过角度 0 度 表示从下到上，90deg表示从左到右 ， 180deg 表示从上到下， 270deg 从右到左 关键词： to top 、 to right 、 to bottom 、 to left 、 top left 、 top right

w3c标准径向渐变语法 radial-gradient([ [ || ] [at ] ?, | at ,]])

过渡 transition: <过渡属性> <过渡所需时间> <过渡动画函数> <过渡延迟时间>

呵呵

Add a custom sidebar
Clone this wiki locally