box-shadow属性
CSS3的box-shadow属性可以让我们轻松实s现图层阴影效果。下面来介绍一下该属性的用法。
先来说说box-shadow的语法：
box-shadow：length length length length color
length：阴影水平偏移值
length：阴影垂直偏移值
length：阴影模糊值
length：阴影边框
color：阴影颜色
下面来举个例子：
box-shadow:3px 3px 6px 0px #666效果如下图:
image.png
box-shadow:-3px -3px 6px 0px #666效果如下图：
image
box-shadow:0px 0px 12px 0px #666效果如下图：
image
box-shadow: 0px 0px 10px 5px #666效果如下图：
image
box-shadow属性的浏览器兼容性
Opera:Opera到最新的10.53版本，已经支持box-shadow属性。firefox通过私有属性-moz-box-shadow支持。Safari和Chrome通过私有属性-webkit-box-shadow支持。所有IE不支持(不知道IE9是否有所改善)。
IE本身是shadow滤镜可以实现类似效果的，还有一些js和.htc的hack文件可以帮助你在IE中实现这一效果。我也无法一一都去尝试，这里只介绍我用过的一个。
ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。
它的使用方法是：下载它并放到你的服务器目录
当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。不支持RGBA值中的alpha透明度。不支持inset内阴影。不支持阴影扩展。阴影在IE中只会显示为黑色，不管你设置成其它什么颜色
参考：https://www.sohu.com/a/156717520_99897596
使用CSS3修改radio的颜色和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demoHidden{
display: none;
}
.radioInput{
display: inline-block;
width:36px;
height:36px;
border:2px solid green;
border-radius:100%;
margin-right:10px;
vertical-align: middle;
}
.demoHidden:checked + .radioInput:after{
content:"";
display: inline-block;
width:26px;
height:26px;
background:#00a1e9;
border-radius:100%;
margin-top:5px;
margin-left:5px;
}
.demoHidden:checked + .radioInput{
border:2px solid #00a1e9;
}
</style>
</head>
<body>
<label>
<input type="radio" name="demo-radio" class="demoHidden">
<span class="radioInput"></span>先生
</label>
<label>
<input type="radio" name="demo-radio" class="demoHidden">
<span class="radioInput"></span>女士
</label>
</body>
</html>
参考：https://blog.csdn.net/csdnlinyongsheng/java/article/details/81511784
隐藏滚动条，但依旧具备可以滚动的功能
& > #container::-webkit-scrollbar {
display: none;
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
}
网友评论