CSS的使用

一、隐藏

1、文本隐藏

/*文本隐藏*/
.text-hidden{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
/*文本隐藏，悬浮显示*/
.text-hidden:hover{width: auto!important;
}

二、浮动样式

1、显示、隐藏浮动div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.bb{display: none;}/*  当aa触发hover后,跟在aa后面的bb的样式被触发*/.aa:hover + .bb{display: inline;}.bb:hover{display: inline;}</style>
</head>
<body><div class="aa">aa</div><div class="bb">bb</div>
</body>
</html>

2、清除浮动

/*解决浮动，用在最后*/
.clearBoth {clear: both;height: 0px;width: 0px;
}

3、浮动填充

最后一个DIV填满剩余的部分

<div style="border:1px solid red; overflow:hidden;zoom:1;"> <div style = 'float:left; background:yellow;' >yellow</div> <div style = 'float:left; background:green;' >green</div> <div style = 'float:left; background:blue;' >blue</div> <div style = 'float:left; background:gold;' >gold</div> <div style = 'background:red; _float:left;' ><div style = "_width:100%;" >red</div ></div >
</div>

参考：https://blog.csdn.net/weixin_30273501/article/details/95275928

三、旋转

transform:rotate(90deg);  //顺时针旋转90度
transform:rotate(-90deg);  //逆时针旋转90度

四、字体

1、css中如何引入第三方字体

https://jingyan.baidu.com/article/eae078276667611fed548562.html

五、css美化radio

https://c.runoob.com/codedemo/3373

六、边框、阴影

1、用css给div的border设置阴影

这是单边有阴影效果的！阴影不再是实影投影，阴影清晰复度向外扩散，更具阴影的效果的！

box-shadow: -2px 0 3px -1px green, //左边阴影制
box-shadow: 0 -2px 3px -1px blue, //顶部阴影
box-shadow: 0 2px 3px -1px red, //底部阴影
box-shadow: 2px 0 3px -1px yellow; //右边阴影