一,伪元素选择器
常用的伪元素:
lorem快速生成测试文本
1,伪元素选择器 用的是两个冒号分隔,早期写法是一个冒号,浏览器也能识别,但是不建议酱紫写。
1,首字母加样式 ::first-letter
p::first-letter{
font-size: 30px;
color: hotpink;
float: left;/* 首字母下沉 */
2,首行特殊样式 ::first-line,
准确识别第一行。
3,文本被选择时的样式 ::selection
只能设置:color,background-color,text-shadow(文字阴影)。
4,placeholder
设置文本框内占位提示符的字体效果,但是兼容性奇差无比。用时需要处理兼容性。
input::-webkit-input-placeholder{
color: orange;
}
△5,::before+content
能够在 不添加其他标签的情况下 新增样式。
必须设置content属性,只是需要拥有这个属性即可属性值是什么无所谓,
before伪元素默认是行内元素 为了能够设置宽高 需要变成块级元素。
div::before{
content: '';
display: block;/* 需要转换成块级元素 */
width: 100%;
height:50px;
border: 1px solid black;
position: absolute;/*子元素加了绝对定位,父元素记得加相对定位。 */
bottom:0px;
left: 0px;
}
6, ::after和before一样。
可以用来做遮罩,
缺点就是 :伪元素 只能够设置一个元素,其内部无法再添加后代元素。
伪元素 只能够添加给 双标签元素。
before和after只是名字不同而已 用法一样,
双标签元素 只支持 这两个伪元素,多添加无效,最多添加一个。
.showBox{
background: url('images/robot.png') no-repeat center;
margin: 50px auto;
position: relative;
}
.showBox::after{
content: '';
position: absolute;
width: 100%;
height:0%;
background-color: orange;
opacity: 0.5;
transition:all 1s;
}
.showBox:hover::after{
height: 100%;
}
7,颜色设置:
background-color:hsla(110,83%,52%,.5)
opacity:.5
使用rgba或者hsla设置的透明度 不会被继承。
8,文字阴影。
文字四周阴影环绕。
阴影大小默认跟文字一样大。
颜色模糊:会直接放大影子。
方向:x,y。x的正方向是右边,y的正方向是下边。
颜色:默认的颜色是黑色。
可以设置多个。
text-shadow:(xpx ypx 模糊px 颜色,xpx ypx 模糊px 颜色);
浮雕文字(3D立体效果):
body{
background-color: gray;
}
h1{
color: gray;
font-size: 300px;
text-align: center;
transition:all 1s;
}
h1:hover{
text-shadow:1px 1px black,
-1px -1px white;
cursor: pointer;
}
9,盒子阴影:
可以设置 inset 内阴影,
放大效果不是模糊的,视觉效果上较差。
box-shadow:(inset xpx ypx 模糊100px 放大px 颜色,inset xpx ypx 模糊px 放大px 颜色);
10,盒模型:box-sizing
box-sizing默认设置是content-box:优先保证内容的大小,对盒子进行缩放。
border-box:让盒子优先保证自己所占区域的大小,对内容进行压缩。
box-sizing:border-box;
※:希望在顶部 制作一个 跟浏览器窗口一样大的 通栏
border需要有23px
div{
width: 100%;
height: 100px;
background-color: skyblue;
border: 23px solid gray;
box-sizing:border-box;
}
11,css3背景属性
①background-size
设置多重背景图片,对应大小以及对应的位置关系。
contain图片两边等比例拉伸,直到某一边顶格停止。
cover图片等比例拉伸 保证两边都顶格 可能会出去
background-size:contain;
background-size:cover;
设置多重背景图片,对应大小以及对应的位置关系。
background-image: url('images/gyt.jpg'), url('images/gyt.jpg');
background-size: 300px 100px,400px 200px;
background-position: top left,100px 300px;
②background-origin
设置的是背景图片 开始的位置
border-box:从边框开始。
下边两个属性,如果没有设置padding那么看起来视觉效果一样。
content-box:从内容开始。
padding-box:padding开始的位置。
background-origin:border-box;
③background-clip设置的是背景切割的位置。
padding-box:将padding之外的区域切割。
content-box:内容之外的区域切割。
background-origin&clip结合运用可以实现在不改变背景图片大小的情况下,让a标签或者div标签的点击范围增大, 并且放大镜 是在a标签的中间的。
background-origin:content-box;
background-clip:content-box;
12,渐变:
兼容性还不是太好。
可以借助第三方工具:序列帧工具→过渡生成器→css3颜色渐变选择器
①线性渐变
background-image:liner-gradient(to方向(45deg),颜色1,颜色2,颜色3颜色之后加百分比);
background-image:liner-gradient(to left,red,skyblue 20%,yellow);
②径向渐变:借助过渡生成器
径向渐变设置的是圆形的渐变。(直径,位置,颜色1,颜色2)