持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
本章内容
1.垂直对齐方式
2.滤镜
3.圆角边框
4.overflow
5.元素本身隐藏
6.字间距
7.单词间距
8.元素整体透明度
9.细线边框
10.css画三角
11.链接伪类选择器
12.属性选择器
13.精灵图
14.背景图大小
15.盒子阴影
16.文字阴影
17过渡
垂直对齐方式
场景：解决行内/行内块元素垂直对齐问题 vertical-align属性只对行内或行内块元素有效.
/* 默认值 基线对齐 */
vertical-align: baseline;
/* 底部对齐 */
vertical-align: bottom;
/*中线对齐 */
vertical-align: middle;
/* 顶部对齐 */
vertical-align: top;
滤镜
blur()里面跟数值,数值越大越模糊,网页的模糊程度
filter: blur(5px);
国家发生重大事故 网站变灰
filter: grayscale(100%);
圆角边框
border-radius
左上角开始赋值 顺时针
左上角 右上角 右下角 左下角
.box {
width: 300px;
height: 300px;
background-color: #ffa500;
/* 圆形 边框圆角为宽高的一半 */
/* border-radius: 150px; */
border-radius: 50%
}
.box1 {
width: 200px;
height: 60px;
background-color: purple;
/* 胶囊按钮 盒子高度的一半*/
border-radius: 30px;
text-align: center;
line-height: 60px;
font-size: 20px;
color: #fff;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 0 50%;
}
overflow
.box {
width: 200px;
height: 300px;
background-color: pink;
/* 默认值 溢出部分可见 */
/* overflow: visible; */
/* 溢出部分隐藏 */
/* overflow: hidden; */
/* 无论是否溢出都会显示滚动条 */
/* overflow: scroll; */
/* 根据是否溢出 自动显示滚动条 */
overflow: auto;
/* 注意定位的盒子慎用overflow: hidden; */
}
扩展:
单行文本溢出显示省略号:
/* 1 文字装不下 让文字强制在一行显示 */
white-space: nowrap;
/* 2 超出部分溢出隐藏 */
overflow: hidden;
/* 3 隐藏的部分显示省略号 */
/* ellipsis 省略号意思 */
text-overflow: ellipsis;
多行文本溢出显示省略号:
overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 / display: -webkit-box; / 限制在一个块元素显示的文本的行数 / -webkit-line-clamp: 2; / 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
注意:
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端
元素本身隐藏
/* 元素本身隐藏 占位置 */
visibility: hidden;
/*元素本身隐藏 不占位置 */
display: none;
重要
元素隐藏
display: none;
元素显示
display: block;
字间距
letter-spacing: 5px;
英文 字母之间的间距
中文 字之间的间距
单词间距
word-spacing: 10px;
英文单词之间的间距 中文无效
元素整体透明度
opacity:0.5;
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
细线边框
border-collapse: collapse;
css画三角形
1 画一个盒子
2 设置不同边框的颜色
3 宽高设置为0 仅保留边框
4 选择其中一个三角形设置颜色 ,其余的三角形设置为透明色
.box{
/*width: 400px;
height: 400px; */
width: 0;
height: 0;
background-color: transparent;
border-top: 50px solid pink;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
链接伪类选择器
/* 未访问时候的状态 */
a:link {
color: pink;
}
/* 鼠标点击后的状态 */
a:visited {
color: purple;
}
/* 鼠标悬停时的状态 */
a:hover {
color: green
}
/* 鼠标按下未弹起时的状态 */
a:active {
color: orange;
}
链接伪类选择器权重是10
书写顺序LHHA
焦点伪类选择器
只对表单元素有效
input:focus {
background-color: orange;
}
属性选择器
通常借助html属性来选择元素,通常用于input标签
选择具有att属性的E元素。
E[att]{}
选择具有att属性且属性值等于val的E元素。
E[att="val"]{}
input[type=text] {
background-color: red;
}
input[type=password] {
background-color: green;
}
精灵图
精灵图:
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点:
减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤:
1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
.s1 {
display: block;
width: 20px;
height: 20px;
/* background-color: pink; */
background-image: url(./images/sprites.png);
/* 水平位置 垂直位置 */
/* 精灵图位置往左 往上都是负值 */
background-position: -139px -7px;
}
背景图大小
background-size:cover|contain|百分比|数字
.box {
width: 1000px;
height: 300px;
background-color: pink;
background-image: url(./images/jd.jpg);
background-repeat: no-repeat;
/* 关键字 */
/* contain 背景图片等比例缩放 显示宽度 有可能铺不满整个盒子 */
/* background-size: contain; */
/* cover 背景图片等比例缩放 背景图片铺满整个盒子 但是图片有显示不全*/
background-size: cover;
/* 数值 百分比 */
/* 2个数值 第一个表示宽度 第二个表示高度 */
/* background-size:400px 200px; */
/* 1个数值 第一个表示宽度 第二个数值默认值 auto */
/* background-size: 400px auto; */
/* 百分比 参考的是当前盒子自身宽度的百分比 */
/* background-size: 50% 50%;
background-size: 100% 100%; */
}
连写扩展:
background: purple url(./images/dog.gif) 0 0/100px 100px no-repeat;
文字阴影
text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色;
text-shadow: -8px 0px 9px red;
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ;
box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;
默认是外阴影 但是outset不要书写 否则报错
过渡
transition:过渡属性 过渡时间;
过渡 就是让元素慢慢的发生变化,过渡通常搭配hover一起使用
transition属性给需要过渡的元素本身加
谁做过渡到给谁加
.box {
width: 400px;
height: 200px;
background-color: red;
/* transition: 过渡属性 过渡时间 */
/* 让多个属性发生过渡 中间用逗号隔开 */
/* transition: width 2s, height 2s; */
/* all 所有的属性都发生过渡 */
transition: all 3s;
}
/* 过渡 就是让元素慢慢的发生变化 */
.box:hover {
/* 鼠标移入有效果 移除没有效果 */
/* transition: all 3s; */
width: 600px;
height: 300px;
}
最后是原图(●'◡'●)
