前端（八）
2018-08-19 本文已影响0人
要你何用杀了算了
1.条件Hack
有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，
这时就可以使用CSS Hack来解决该问题
CSS Hack实际上指的是一种特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器
不能识别，通过这种方式，来为一些浏览器设置特殊的代码
条件Hack
它只对IE浏览器有效，其它的浏览器都会将它识别为注释
IE10及以上的浏览器已经不支持这种方式
以下内容只会出现在IE6中
<!--[if IE 6]>
<p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->
<!--[if IE 8]>
<p>当前浏览器是IE8！！</p>
<![endif]-->
<!--[if lt IE 9]>
<p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->
<!--[if gte IE 9]>
<p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->
<!--[if lte IE 9]>
<p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->
<!--[if ! IE 6]>
<p>你的浏览器不是IE6</p>
<![endif]-->
2.属性Hack
假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
希望黄色背景只在IE6中生效
在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
_background-color: yellow;
添加了*的样式只有IE7及以下的浏览器认识
*background-color: yellow;
/*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
background-color: yellow\0;
CSS Hack不到万不得已的情况尽量不要使用
3.选择符
在选择器前添加* html 则该选择器只有IE6可以识别
4.圆角阴影透明度
border-top-left-radius: 100px 50px;左上角为椭圆圆角
border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角
border-radius: 40px;曲率半径为40的圆角矩形
border-radius: 20%;最大200px，20%即40px
水平偏移 垂直偏移 羽化大小 扩展大小 颜色
box-shadow: 10px 10px 10px 0px #bfa;
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
box-shadow: 0px 0px 20px 2px red inset;
透明度30%，文字也透明了
opacity: 0.3;
背景色变透明，但文字不会透明
background-color: rgba(255,215,0,0.3);
边框透明
border: 2px solid rgba(0,0,0,0.3);
5图片文字遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片文字遮罩</title>
<style type="text/css">
.box{
width: 200px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
position: relative;
/*默认文字不可见*/
overflow: hidden;
}
.box img{
width: 200px;
height: 300px;
}
.box .pic_info{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
color: #fff;
/*定位使色块在图片正下方*/
position: absolute;
left: 0;
top: 300px;
transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
}
.box:hover .pic_info{
/*色块上移*/
top:150px;
}
/*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
.box .pic_info p{
margin: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/2.jpg" alt="这是一张动漫图">
<div class="pic_info">
<p>图片说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图说明：这是一张动漫图</p>
</div>
</div>
</body>
</html>
运行结果：
6.元素选择
/*旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
.box{
width: 300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
}
.box:hover{
/*默认沿Z轴旋转*/
/*transform: rotate(45deg);*/
/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
/*transform: perspective(800px) rotateX(45deg);*/
transform: perspective(800px) rotateY(-45deg);
}
