CSS3新增属性
程序员文章站
2022-05-29 16:23:21
...
####以前我们学的都是CSS2，因为CSS3兼容性有问题，所以，我们在使用的时候可以在caniuse.com这个网站上可以查看CSS3每个属性的兼容性
CSS3属性如果考虑兼容所有浏览器的话，必须写全5行才行
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;一、选择器
现在，我们看看CSS3增加了哪些选择器
http://css.doyoe.com/ 这个手册css3手册写的非常好，像选择器这种东西，不用都记住，遇到了现来这里查就好
所谓伪对象选择符，不是真实存在的对象，可以用一个冒号，但为了区别于伪类选择器，所以我们建议用俩冒号
重点记一下伪对象选择符中的before和after
正常来说，你要在一个元素后面加个小竖线的话，如果竖线和边框高度一样还好可以用边框做，但是要是要求小竖线和文字一样高，那么就可以用：after来做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
#ul1 li{
width: 100px;
height: 50px;
background: #ffff00;
float: left;
line-height:50px;
text-align:center;
position: relative;
}
#ul1 li::after{
content : "";
background:#000;
width: 1px;
height: 20px;
position: absolute; /*因为伪类对象是行级元素，所以要设宽高的话就得先定位*/
right: 0px;
top: 15px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
</body>
</html>此外after还有一种作用，清除浮动
给元素清除浮动的方法
- 给父元素加overflow ：hidden
- 给父元素设个固定的高
- 给子元素下面加个div，div 设置样式为 clear：left 或both
- 给父元素加个class 叫clearfix，然后运用after
二、文本，字体
1.text-shadow 文本阴影
text-shadow: 10px -10px 0px rgba(255,0,0,0.6);第一个参数是水平偏移量，正值就往右，负值就往左
第二个参数是垂直偏移量，正值就往下，负值往上
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰
第四个参数，阴影颜色
2.text-overflow 超出文本显示省略号
/*单行文本溢出，用省略号显示的语法*/
p{
width: 300px;
height: 50px;
border: 1px solid #ff0;
overflow: hidden;/* 让超出边框的文本隐藏起来*/
text-overflow: ellipsis;/* 让超出边框边缘的的文本显示成...*/
white-space:nowrap;/*让多出边框的文本不换行，在同一行显示*/
}如果不加text-overflow的话，就是这样子
加上text-overflow的话，就会在最后显示省略号
三、颜色 rgba
用rgba的好处是当父元素设置透明的时候，子元素不会跟着一块变透明
div{
background: #f00;
opacity: 0.6;/* 如果这样设置透明度的话，div里面的子元素文字也会跟着透明*/
filter: alpha(opacity = 60);
}如果用rgba设置透明度的话，子元素就不会跟着透明了
div{
background: rgba(255,0,0,0.6);
}四、边框
1.圆角效果 border-radius: 5px; border-radius: 50%; 就变成圆了
下面做个小例子，五环
五环都是一层压一层滴，像上图一样，蓝环与黄环相交的地方，有一处是要蓝环在上面，而另一处则是黄环在上面，代码是不能让环一半在上一半在下的，他是个统一的个体，所以，我们可以在每个环里用伪对象after再插入个和此环颜色一样的环，，让插入的环层级提高，盖住与之相交的其他颜色的环，然后after下面的边框颜色设为透明，这样黄色环就显示出来了，而且改在底下的蓝环上面
最开始的时候呢，是这样的，原始蓝环在最下面，其次是after蓝环，黄色在他俩上面，但是，after设置层级后，就是初始蓝，黄，after蓝了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五环</title>
<style>
*{
margin:0;
padding: 0;
}
.circle, .circle::after{
width: 200px;
height: 200px;
border: 10px solid #000;
border-radius: 50%;
position: absolute;
}
.circle::after{
content: "";
top:-10px; /*因为是在每个圈里加子元素，所以子元素从边框下面加上，所以要往上窜个边框的距离*/
left:-10px;
}
.blue{
border-color: #0000ff;
top: 0px;
left: 0px;
}
.blue::after{
border-color: #0000ff;
z-index: 1;
border-bottom-color: transparent;
}
.black{
border-color: #000000;
top: 0px;
left: 230px;
}
.black::after{
border-color: #000000;
z-index: 1;
border-bottom-color: transparent;
}
.red{
border-color: #ff0000;
top: 0px;
left: 460px;
}
.red::after{
border-color: #ff0000;
z-index: 1;
border-bottom-color: transparent;
}
.yellow{
border-color: #ffff00;
top: 110px;
left: 110px;
}
.yellow::after{
border-color:#ffff00;
}
.green{
border-color: #00ff00;
top: 110px;
left: 340px;
}
.green::after{
border-color: #00ff00;
}
</style>
</head>
<body>
<div class="circle blue"></div>
<div class="circle black "></div>
<div class="circle red" ></div>
<div class="circle yellow"></div>
<div class="circle green"></div>
</body>
</html>2.box-shadow 边框阴影，和文本阴影类似
第一个参数是水平偏移量，正值就往右，负值就往左
第二个参数是垂直偏移量，正值就往下，负值往上
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰
第四个参数 外延值，值越大，就越往外延伸
第五个参数，阴影颜色
五、背景
1.background-origin背景原点
background-origin属性值有
border-box
padding-box
content-box
表示背景是从border、padding、content处开始的
2.background-size背景大小
默认俩参数，可以设置宽和高
属性值为cover的话呢，就是背景扩大到覆盖整个元素为止，可能会超出范围
属性值为contain的话呢，就是扩大到有一边挨着元素了为止，可能会有一块没覆盖上
3.background-clip背景裁切
属性值为border -box表示从border处裁切，保留border以内的
属性值为content-box 表示从content处裁切，保留content以内的