学习目标:
css样式整理,现在并不全,以后会慢慢补全的
学习内容:
1.css阴影
样式: box-shadow: 10px 10px 5px #888888;
box-shadow: 10px(X轴偏移[可负]) 10px(y轴偏移[可负]) 5px(模糊度) #888888(颜色);
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
2.css边框
border:5px solid red;
单独设个边
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
线形
例:border-top-style:dotted;
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
3.渐变
(1).线性渐变
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction(方向), color(第一种颜色), color(第二种颜色), ...)
background: linear-gradient(to right, red , yellow);(从左到右)
(2)渐变对角
background: linear-gradient(to bottom right, red, yellow);(左上到右下)
写对角的方向
4.css过渡
hover:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:50px;
height:50px;
background:green;
transition:width 3s;
-webkit-transition:width 3s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上,查看过渡效果。</p>
</body>
</html>
5.css多列
样式:
(1)将 <div> 元素中的文本分为 3 列
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
(2)多列中列与列间的间隙
div {
-webkit-column-gap: 60px;
-moz-column-gap: 50px;
column-gap: 40px;
}
(3)column-rule-style 属性指定了列与列间的边框样式
div {
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性。
6.溢出隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;