摘要:<!DOCTYLE html><html><head><meta charset="utf-8"><title>那就做个shadow案例吧!我是杨雪,这些css对我来说小菜一碟</title><style>.besideshadow{background-color:green;width:60
<!DOCTYLE html>
<html>
<head>
<meta charset="utf-8">
<title>那就做个shadow案例吧!我是杨雪,这些css对我来说小菜一碟</title>
<style>
.besideshadow{background-color:green;width:600px;height:200px;box-shadow:20px 20px 5px #ccc;color:white;font-size:50px;line-height:200px;padding-left:200px;}
.insideshadow{margin:100px 0px;background-color:green;width:600px;height:200px;box-shadow:100px 150px 200px #ccc inset;color:white;font-size:20px;line-height:200px;padding-left:200px;}
</style>
</head>
<body>
<div class="besideshadow" >
先做一个外面阴影
</div>
<div class="insideshadow">
再做一个内阴影,说好的圆柱呢?怎么调不出来?
</body>
</html>
批改老师:天蓬老师批改时间:2019-01-31 17:20:26
老师总结:box-shadow:100px 150px 200px #ccc inset;你这样阴影是不是有点太大了, 元素修饰,点到为止, 不可以过复杂,会影响到元素的内容展示,毕竟对于用户有用的是内容,而不是样式,对不?