本文深入讲解CSS伪元素、文字和盒子属性，包括:before和:after的使用，文字阴影、文本边框和裁剪，盒子阴影、圆角和背景属性，以及过渡和2D转换等高级技巧。
一.伪元素
伪元素: before,after
相当于是元素内部的两个子元素(盒子),分别是一前一后的两个盒子,默认显示模式是行内式
必写项 ：伪元素中必须有content属性，属性值可为空。
即，可以为 content:"" ;
其他属性和正常的行内式一样
例子：
.box:before{
content:"我是before";
}
.box:after{
content: "我是after";
}
之前我们了解到，在浮动元素后面添加块元素，并设置clear:both;属性。表示结束之前浮动所造成的影响。
而给父元素调用clearfix类名称也能清除浮动所造成的影响。
实际上，clearfix类使用的就是after伪类
实例：clearfix属性
使用after伪类为盒子的最后添加盒子，且盒子内含有clear:both;
由此可知，clearfix也是使用的额外标签法
.clearfix:after{
content:"";
display: block;
clear:both;
height: 50px;
background: yellow;
}
理解图标字体的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.box{
width: 150px;
height: 50px;
border: 1px solid red;
position: relative;
}
.box:after{
/* 图标字体在伪元素中的编码 */
content:"\e601";
position: absolute;
right:0;
top:20px;
}
</style>
</head>
<body>
<div class="box iconfont"></div>
</body>
</html>
二.文字属性
1.文字阴影
text-shadow:水平偏移量 垂直偏移量 模糊程度 颜色；
文字阴影: 可以有多组,用逗号隔开,水平正值向右,负值向左,垂直正值向下,负值向上
text-shadow:5px 5px 10px red,-5px -5px 20px yellow;
设置浮雕效果：
利用文字阴影，制造出浮雕的效果
text-shadow:2px 2px 1px #000;
color:#fff;
凹凸效果：
凹
text-shadow:-1px -1px 0 #000,1px 1px 0 #fff;
凸
text-shadow:-1px -1px 0 #fff,1px 1px 0 #000;
2.文本边框
文本边框属性
-webkit-text-stroke:粗细 颜色；
-webkit-text-stroke: 5px green;
前缀表示浏览器的内核，带前缀的属性表示该属性还在测试阶段
由于浏览器的内核不同，对于每个属性的实现是不同的，在测试阶段需要标明自己内核的前缀
浏览器 内核 前缀
chrome webkit -webkit-
safari webkit -webkit-
firefox gecko -moz-
ie trident -ms-
opera presto -o-
3.文本裁剪
文本裁切
-webkit-background-clip: text; 只保留文本下方的图片，使其他地方的图片不显示
设置文本颜色透明
color:transparent; 设置文本颜色透明，即可以看到文本下面的图片
一般这两个属性配合使用
三.盒子属性
1.盒子阴影
box-shadow: 水平偏移量 垂直偏移量 模糊程度 扩展 颜色 默认向外阴影(inset 向内阴影)；
box-shadow: 10px 10px 10px 10px blue; 向外扩散阴影
box-shadow: 0px 0px 0px 0px blue inset;向内扩散阴影
2.圆角属性
圆角单属性: 可以是像素单位,也可以是百分比,百分比是参照宽高
/* 左上角 */
border-top-left-radius: 10px;
/* 右上角 */
border-top-right-radius: 10px;
/* 右下角 */
border-bottom-right-radius: 10px;
/* 左下角 */
border-bottom-left-radius: 10px;
圆角复合属性:
/* 一个值 四个角*/
border-radius: 10px;
/* 两个值 左上和右下 右上和左下*/
border-radius: 10px 20px;
/* 三个值 左上 右上和左下 右下*/
border-radius: 10px 20px 30px;
/* 四个值 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
圆角的x轴y轴
边框圆角是使角的两边以设置的值为画圆
所以，角的两边可能会出现需要设置值不同的情况。即：
单属性
border-top-left-radius:水平/垂直;
border-top-left-radius: 10px/5px;
复合属性:
border-radius:水平/垂直;
border-radius: 100px/50px;
border-radius:水平 水平 水平 水平/垂直 垂直 垂直 垂直 ;
border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;
3.背景属性
背景裁剪属性
background-clip: 边框/内边距/内容-box;
border-box 从边框开始可见(默认值)
padding-box 从padding开始可见
content-box 从内容开始可见
background-clip: content-box;
背景起始位置
background-origin: 边框/内边距/内容-box;
border-box 起始位置在边框的左上
padding-box 起始位置在padding左上
content-box 起始位置在内容左上
background-origin: content-box;
背景缩放
背景缩放属性
background-size:宽度 高度；
宽度 高度
background-size: 500px 300px;
宽度 高度
background-size: 50% 100% ;
根据元素的最长边进行铺满,为保证图片不失真,会截掉一部分
background-size: cover;
根据元素的最短边进行铺满,为保证图片不失真,会有一部分留白
background-size: contain;
滚动背景和固定背景
设置背景图片的显示方式
background-attachment: fixed;
scroll(默认值) 滚动背景,背景图的默认参考点是盒子左上,
当盒子移动,背景图会跟着移动
fixed 固定背景,背景图的默认参考点永远是浏览器窗口,
只有给某个元素设置该背景图时,才能通过这个元素看到背景图
background-attachment: fixed;
多背景图的显示
背景图可以引入多个,用逗号隔开,先写的会压在后写的上面
例:
background:url(img/1.png) no-repeat 0 0,url(img/atguigu.png) no-repeat 0 0, url(img/bg.png) no-repeat 0 0;
模糊属性
模糊属性,当是标准流时,对前面设置定位属性的元素有影响
filter: blur(15px);
4.过渡属性
过渡: 属性从某个值,在规定的时间内,到达目标值,这个过程就是过渡.
过渡的属性必须是从某个值到达某个值(有值的变换)的属性
例如:display:none和block就不能实现过渡
过渡的单属性:
transition-property 过渡的属性
transition-property: width,height,background-color,display;
也可为
transition-property: all;
transition-duration 过渡的时间
时间的单位: 秒s,毫秒ms, 1秒=1000毫秒
transition-duration: 3s;
transition-timing-function 过渡的方式
transition-timing-function: linear;
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
也可直接写贝塞尔曲线值
transition-timing-function: cubic-bezier(0,-0.41,1,1.44) ;
transition-delay 延时时间
时间的单位: 秒s,毫秒ms, 1秒=1000毫秒
transition-delay: 1s;
过渡复合属性
transition:过渡的属性 过渡时间 过渡方式 过渡延时；
过渡每个属性之间用逗号隔开
也可只写用:过渡的属性 过渡时间；一般过渡方式不写时，默认为linear，过渡延时默认为0
transition: width 3s linear .5s,height 2s ease .5s,background-color 2s ease-in .2s;
transition: all 3s ease-in-out .5s;
transition: all 3s
四.2D转换
2D转换是一个复合属性transform
位移
transform:translate(水平,垂直);
和相对定位的使用方式相同,是一个在标准流占位置的移动,
是根据自身的位置进行水平和垂直的移动
水平正值向右,负值向左
垂直正值向下,负值向上
水平位置 垂直位置
transform: translate(0px,0px);
background: yellow;
自身宽度的百分比 自身高度的百分比
transform: translate(-50%,50%);
利用translate实现,无固定宽高的元素水平垂直居中
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
旋转
transform:rotate(deg);
rotate(角度)
旋转：
单位是deg（度数） 正值是顺时针，负值是逆时针
transform: rotate(deg);
沿着z轴旋转
transform: rotateX(deg);
沿着X轴旋转
transform: rotateY(deg);
沿着Y轴旋转
旋转中心点是可变的
transform-origin:水平方向(x轴) 垂直方向(y轴);
水平：left/center/right
垂直：top/center/bottom
默认为：
transform-origin:center center;
也可为具体的像素值，如：
transform-origin:0px 0px;
代表着旋转中心点在该盒子的左上角
另：旋转中心点的设置必须写在transform:rotate(deg);之前
即：
transform-origin:0px 0px;
transform: rotate(60deg);
当旋转是沿着x轴旋转时，transform-origin:水平方向(x轴) 垂直方向(y轴);的只能设置垂直方向的位置，水平方向的设置不起作用。但也要写。
当旋转是沿着y轴旋转时，transform-origin:水平方向(x轴) 垂直方向(y轴);的只能设置水平方向的位置，垂直方向的设置不起作用。
注： transform是复合属性，旋转和位移同时写在一个元素中时，后写的会层叠先写的
这时，要将旋转和位移写在一个属性中，且必须先写位移后写旋转，否则旋转的过程中中xy轴会发生变化，位移不到预定位置
即,要写成如下样式：
transform:translate(0px,0px) transform: rotate(360deg);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
