零散属性
outline: 轮廓线 例:outline: #00ff00 dotted thick; (设置轮廓线的颜色、样式、宽度)
值 | 描述 |
---|---|
none | 去掉聚焦边框颜色以及所有轮廓线设置 |
outline-color | 边框的颜色。 |
outline-style | 规定边框的样式。 |
outline-width | 规定边框的宽度。 |
值 | 描述 |
---|---|
none | 默认。定义无轮廓。 |
dotted | 定义点状的轮廓。 |
dashed | 定义虚线轮廓。 |
solid | 定义实线轮廓。 |
double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
值 | 描述 |
---|---|
thin | 规定细轮廓。 |
medium | 默认。规定中等的轮廓。 |
thick | 规定粗的轮廓。 |
length | 允许您规定轮廓粗细的值。单位“PX”。 |
white-space: 设置如何处理元素内的空白。例:white-space: normal (默认,自动换行)
所有参数如下:
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 所有空格和换行都会被浏览器保留。 |
nowrap | 文本不会换行 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
padding: 设置文字与边框之间的间距。 例:padding: 10px; 亦可:padding-left: 10px; (上边距设置10px)
position: 规定元素的定位类型。 例positon: relative; (变为相对定位的元素)
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 relative 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
top、bottom、left、right: 上下左右移动标签。需要与position联动使用。 例:top: 10px;
z-index: 元素的堆叠顺序,数值越大越靠上。需要与position联动使用。例:z-index: 1;
display: none; 隐藏标签,其他值如下:
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。显示隐藏 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
visibility: 规定元素是否可见。例:visibility: hidden;
值 | 描述 |
---|---|
hidden | 隐藏 |
visible | 显示隐藏 |
display | 无法使用transition动画显示, 只能用opacity透视代替 |
visibility | 可以使用transition动画显示 |
opacity: 设置透明度。范围在0-1之间。例:opacity: 0.5;
word-spacing: 单词之间的间距。例:word-spacing: 10px;
letter-spacing: 字符之间的距离。例:letter-spacing: 10px;
direction: 设置文字方向。例:direction: ltr;
值 | 描述 |
---|---|
ltr | 默认。文本方向从左到右。 |
rtl | 文本方向从右到左。 |
overflow: hidden; 隐藏溢出。
border-radius: 设置边框的弧度。例:border-radius: 10px;
box-sizing: border-box; 将padding和border的长度也纳入总长度。改为IE盒子类型。
box-shadow: 元素阴影。例:box-shadow: 0 10px 8px red;
最多填写六个值,分别表示为:
值 | 描述 |
---|---|
h-skewing(必要) | 阴影在水平方向的偏移,负数是向左偏移,正数是向右偏移,单位为“px”。 |
v-skewing(必要) | 阴影在垂直方向的偏移,负数是向上偏移,正数是向下偏移,单位为“px”。 |
blur(可选) | 阴影的“模糊距离”或“模糊程度”,单位为“px”。 |
spread(可选) | 阴影的扩展范围,若将“blur”设为“0”,该值则相当于一个可以进行位置偏移但不具备“outline-offset”的“outline”,单位为“px”。 |
color(可选) | 阴影的颜色,支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。 |
inset(可选) | 将默认向外的阴影方向改为向内。 |
clear: both; 清除左右浮动
clip-path: 裁剪图形。例:clip-path: polygon(50% 0, 25% 50%, 75% 50%);
值 | 描述 |
---|---|
circle | 圆 |
ellipse | 椭圆 |
inset | 圆角 |
polygon | 多边形,以左上角为圆点 |
圆 | clip-path: circle(50% at 50% 50%); |
椭圆 | clip-path: ellipse(25% 40% at 50% 50%); |
矩形 | clip-path: inset(5% 20% 15% 10%); |
三角形 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
菱形 | clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
梯形 | clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); |
平行四边形 | clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); |
五边形 | clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); |
六边形 | clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
七边形 | clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); |
八边形 | clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); |
斜角 | clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); |
槽口 | clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); |
左箭头 | clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); |
右箭头 | clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); |
星星 | clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); |
十字架 | clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%); |
叉号 | clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); |
对话框 | clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); |
calc: 计算公式。例:calc: (100px-10px); *支持 “+”,“ - ”,“*”,“/” 运算
cursor: 要显示的光标的类型。例:cursor: pointer; 设置鼠标形状为一只手。
值 | 描述 |
---|---|
url | 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
s-resize | 此光标指示矩形框的边缘可被向下移动(南)。 |
w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
perspective: 定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 *当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:
/*目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
*/
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
perspective-origin: 设置 3D 元素的基点位置。*当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:
/*目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
*/
div
{
perspective-origin: 10% 10%;
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}
!important: 提高指定CSS样式的属性值的优先权。例:width: 100px !important;
@media: 媒介,可以针对不同的屏幕尺寸设置不同的样式。例:@media screen and (max-width: 768px){}
@media screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
vw/vh: 屏幕浏览器视口的宽高,将屏幕均分为100个平均尺寸。例:width: 100vw; height: 100vh;
filter: 滤镜。例:filter: blur(40px)
值 | 描述 | |
---|---|---|
none | 默认值,没有效果。 | |
blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。 | |
brightness(%) | 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。 | |
contrast(%) | 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。 | |
drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。
| |
grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0; | |
hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。 | |
invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。 | |
opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。 | |
saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。 | |
sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0; | |
url() | URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。 例如:
|
:link:伪类选择器用于选取未被访问的链接。
*:link 选择器不会设置已经访问过的链接的样式。
<style>
a:link{
color:red;
}
</style>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
:visited:伪类选择器用于选取已被访问的链接。
<style>
a:visited
{
background-color:yellow;
}
</style>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释:</b>:visited 选择器为已被访问的链接设置样式。</p>
</body>
:active:伪类选择器用于选择活动链接。点击的瞬间生效
<style type="text/css">
a:active{
color: #0000FF
}
</style>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!</p>
</body>
:focus:伪类选择器用于选取获得焦点的元素。
<style>
input:focus
{
background-color:yellow;
}
</style>
<body>
<p>在文本框中点击,您会看到黄色的背景:</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
<p><b>注释:</b>如果 :focus 用于 IE8 ,则必须声明 <!DOCTYPE>。</p>
</body>
:after:伪类选择器在被选元素的内容之后插入新内容。
<style>
p:after
{
content:""; //每一个after必须添加此代码,否则无法生效
}
</style>
:before:伪类选择器在被选元素的内容之前插入新内容。
<style>
p:before
{
content:""; //每一个before必须添加此代码,否则无法生效
}
</style>
font属性:可以统一连写
font-size: 字体大小 例:font-size: 16px;
font-family: 字体类型 例:font-family: "微软雅黑", sans-serif;
font-style: 字体样式 例:font-style: normal;
值 | 描述 |
---|---|
normal | 默认,普通字体 |
italic | 斜体 |
oblique | 倾斜字体 |
font-weidth: 字体粗细 例:font-weidth: normal;
值 | 描述 |
---|---|
normal | 默认,正常粗细 |
bold | 粗体 |
bolder | 更粗的字体 |
lighter | 更细的字体 |
100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
transistion属性:可以统一连写
transition: all 1s; 在规定的时间从一个大小变换到其他大小,过度时间曲线的延迟时间。all:表示所有属性
transition-property: background; 针对某一个属性进行过度,可以添加多个属性。
transition-duration: 1s; 过渡时间。
transition-timing-function: ease; 过度时间曲线,默认
值 | 描述 |
---|---|
ease | 默认值,逐渐变慢。 |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速再减速 |
cubic-bezier([参数]) | 贝塞尔曲线 |
transition-delay: 5s; 过度延迟时间。
text属性:文本样式
text-align: 文本对齐方式。例:text-align: center;
值 | 描述 |
---|---|
left | 默认,左对齐 |
center | 居中对齐 |
right | 右对齐 |
text-indent: 段落首行缩进。 例:text-indent: 2em; 中文首行缩进2字符常用
text-decoration: 文本装饰线。例:text-decoration: none;
值 | 描述 |
---|---|
none | 默认,不显示任何装饰线 |
underline | 在文本下方显示装饰线 |
overline | 在文本上方显示装饰线 |
line-through | 在文本中间显示装饰线,相当于删除线 |
text-transform: 英文字母大小写转换。例:text-transform: none;
值 | 描述 |
---|---|
none | 默认,保持文本中英文单词的默认大小写 |
capitalize | 单词首字母大写 |
uppercase | 全大写 |
lowercase | 全小写 |
text-shadow: 文本阴影。例:text-shadow: 0 0 10 red;
四个值分别为:
值 | 描述 |
---|---|
水平方向阴影偏移(h-shadow) | “0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。 |
垂直方向阴影偏移(v-shadow) | “0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。 |
阴影模糊距离(blur) | 用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。 |
阴影的颜色(color) | 支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。 |
text-overflow: 当文本溢出时的设置。例:text-overflow: clip;
值 | 描述 |
---|---|
clip | 裁剪文本 |
ellipsis | 多出来的文本用省略号代替, 需要文本设置不换行 |
显示三排再省略:
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
background属性:背景设置
background-color: 设置背景颜色。例:background-color: red;
background-image: 设置背景图片。例:background-image: url(图片地址);
background-repeat: 设置背景图片的格式。例:background-repeat: repeat;
值 | 描述 |
---|---|
repeat | 默认,以“平铺”的方式排列图片 |
repeat-x | 只在水平方向(X轴方向)进行重复 |
repeat-y | 只在垂直方向(Y轴方向)进行重复 |
no-repeat | 不平铺 |
background-position: 背景图定位。例:background-position: left top;
值 | 描述 |
---|---|
方位英文单词 | 有“left”、“right”、“top”、“bottom”和“center”。用法如:“left top”(默认),设置背景图在元素内的“左上方”;“right bottom”,设置背景图在元素内的“右下方”;“center center”,设置背景图在元素的“中心”。 |
百分比单位 | 用法如:“0% 50%”,设置背景图在元素内“水平方向”的“左方”,垂直方向的“中心”;“50% 50%”,,设置背景图在元素内的“中心”;“100% 100%”,,设置背景图在元素内的“右下方”。 |
像素单位 | 背景图的“左上角”相对于元素“左上角”偏移的距离,如“10px 20px”,设置背景图“水平向右”偏移10像素,“垂直向下”偏移20像素。 |
background-attachment: 固定背景图片。例:background-attachment: fixed
值 | 描述 |
---|---|
scroll | 默认值,当页面滚动的时候,背景图也跟随页面同步滚动 |
fixed | 页面出现滚动条后就算页面滚动,背景图也会固定在原来的位置不会跟随页面滚动。 |
background-clip: 背景裁切范围。例:background-clip: border-box;
值 | 描述 |
---|---|
border-box | 默认,背景的覆盖范围从“border”开始 |
padding-box | 背景的覆盖范围从“padding”开始 |
content-box | 背景的覆盖范围从“content”开始 |
background-size: 背景图片的大小。例:background-size: 100% 100%;
值 | 描述 |
---|---|
像素值 | 设置两个值,一个为宽、一个为高,单位为“PX”。 亦可以一个值为固定值一个为auto,达到原始图像比例的效果 |
百分比值 | 结构与像素值一样,单位为"%" |
contain | 自动将背景图像填满元素的其中一边,图像的比例保持不变。 |
cover | 在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。 |
background-origin: 背景图像开始的位置。例:background-origin: content-box;
值 | 描述 |
---|---|
border-box | 默认,背景的覆盖范围从“border”开始 |
padding-box | 背景的覆盖范围从“padding”开始 |
content-box | 背景的覆盖范围从“content”开始 |
background: 背景渐变色。例:background: linear-gradient(red, black);
线性渐变:沿着一条直线进行,必须要具有两种或以上的颜色
/*最基本的渐变*/
background: linear-gradient(#d80000,#2c2cff);
/*一个有方向的渐变*/
background: -webkit-linear-gradient(left,#bce510,#e66055); //谷歌浏览器
background: -moz-linear-gradient(left,#bce510,#e66055); //搜狐浏览器
background: -ms-linear-gradient(left,#bce510,#e66055); //IE浏览器
background: linear-gradient(to right,#bce510,#e66055); //不进行适配
/*边角方向开始的渐变*/
background: -webkit-linear-gradient(left top,#d80000,#2c2cff);
background: -moz-linear-gradient(left top,#d80000,#2c2cff);
background: -ms-linear-gradient(left top,#d80000,#2c2cff);
background: linear-gradient(to bottom right,#d80000,#2c2cff);
/*有角度的渐变*/
background: -webkit-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -moz-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -ms-linear-gradient(15deg,#d8b700,#0bcc6c);
background: linear-gradient(15deg,#d8b700,#0bcc6c);
/*多色渐变*/
background: -webkit-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
/*多重多色的渐变*/
background: -webkit-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-webkit-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -moz-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-moz-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -ms-linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-ms-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
/*重复线性渐变*/
background: -webkit-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -moz-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -ms-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
径向渐变:颜色的变化过度方式是以一个圆的圆心为参照进行的
background: -webkit-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
transform属性:变形转换,综合运用:translate、rotate、scale、skew
transform: translate(100px, 100px); XY平移
transform: translateX(100px); 横向平移
transform: translateY(100px); 纵向平移
transform: rotate(100deg); 按照顺时针旋转;
transform: rotateX(100deg); 按照上下旋转
transform: rotateY(100deg); 按照左右旋转
transform: scale(1.5); 放大或缩小倍数
transform: scaleX(1.2); 左右放大或缩小
transform: scaleY(1.2); 上下放大或缩小
transform: skew(15deg); 倾斜
transform: skewX(15deg); X轴倾斜
transform: skewY(15deg); Y轴倾斜
transform-origin: top left; 定义一个原点
transform-style: flat; 2d平面动画
transform-style: preserve-3d; 3d动画
animation属性: 动画
animation-name: 定义动画的名称,使用该属性调用关键帧执行动画。例:animation-name: resizeWord;
@keyframes: 动画关键帧定义,使用animation调用。例:
/*英文单词模式*/
@keyframes resizeWord{
from{ width: 100px }
to{ width: 800px; }
}
/*百分数模式*/
@keyframes resizeWord{
0%{ width: 100px }
20%{ width: 200px; }
40%{ width: 400px; }
60%{ width: 600px; }
80%{ width: 800px; }
100%{ width: 1000px; }
}
animation-duration: 动画执行时间。例:animation-duration: 2s;
animation-timing-function: 动画事件曲线。例:animation-timing-function: ease;
值 | 描述 |
---|---|
ease | 默认值,逐渐变慢。 |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速再减速 |
cubic-bezier([参数]) | 贝塞尔曲线 |
animation-delay: 动画延迟时间。例:animation-delay: 2s;
animation-iteration-count: 动画播放的次数。例:animation-iteration-count: 1;
值 | 描述 |
---|---|
1 | 表示在执行某事件后只执行1次动画。 |
[number] | 任意正整数,表示在执行某事件后只执行[numver]次动画。 |
infinite | 表示在执行某事件后“无限次”执行动画。 |
animation-direction: 动画逆时针播放。例:animation-direction: alternate;
值 | 描述 | |
---|---|---|
normal | 默认值。动画应该正常播放。 | |
alternate | 动画应该轮流反向播放。 |
animation-play-state: 动画的播放与暂停。animation-play-state: running;
值 | 描述 | |
---|---|---|
running | 播放动画 | |
paused | 暂停动画 |
animation-fill-mode: 设定元素动画形态,它可以预设值动画播放前的“第一帧”和保留动画播放完成后的“最后一帧”。例:animation-fill-mode: backwards
值 | 描述 | |
---|---|---|
backwards | 让元素保持动画第一帧定义里所设置的CSS属性,直到动画开始执行。 | |
forwards | 让元素保持动画播放结束后最后一帧定义里所设置的CSS属性。 | |
both | 让元素保持动画第一帧里定义的CSS属性,直到动画开始,动画播放完成后又保持动画最后一帧的属性。 |
animation:组合写法:动画名称、执行时间、速度曲线、延迟时间、播放次数、周期逆向播放、播放状态(开始/暂停)、首帧预设/末帧保留
弹性盒子布局:需要将属性值添加到需要布局的父元素上面才能实现
display: flex; 弹性盒子开始代码,一切开端
行列布局:
flex-direction: row; 默认行,从左往右排列
flex-direction: row-reverse; 从右往左排列,内容也一起调换排列
flex-direction: column; 列,从上往下排列
flex-direction: column-reverse; 从下往上排列,内容也一起调换排列
水平对齐:
justify-content: flex-start; 默认,水平左对齐
justify-content: flex-end; 水平右对齐
justify-content: center; 水平居中对齐
justify-content: space-between; 水平两端分散对齐
justify-content: space-around; 水平分散对齐
垂直对齐:
align-items: flex-start; 默认,垂直顶端对齐
align-items: flex-end; 垂直底端对齐
align-items: center; 垂直居中对齐
align-items: baseline; 基线对齐
align-items: stretch; 子标签高度为auto或者没有设置时,高度自动与父元素高度同步
换行:需要多行对齐时必添加此项
flex-wrap: none;
值 | 描述 | |
---|---|---|
none | 不换行 | |
wrap | 换行 | |
wrap-reverse | 换行颠倒 |
多行对齐:
align-content: flex-start; 多行顶端对齐
align-content: flex-end; 多行底端对齐
align-content: center; 多行居中对齐
align-content: space-between; 多行两端分散对齐
align-content: space-around; 多行两端对齐
散装属性值:定义到子元素中
flex-grow: 使子元素瓜分父元素剩下的空间。例:flex-grow: 1;
flex-basis: 向父元素预约设置好的空间,并且此元素的权限大于width。如果两者有一个为auto,那么非auto的优先级更高。而且此元素受到max-width与min-width的限制。例:flex-basis: 100px;
flex-shrink: 当子元素的总宽度大于了父元素的宽度时,用此方法按比例缩减子元素的宽度。例:flex-shrink: 1;