轮廓和阴影
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮廓和阴影</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: #87CEEB; margin: 50px auto; /* 轮廓 轮廓就是不占空间的边框,设置轮廓不会影响元素的布局 */ outline: 5px red solid; /* 阴影 box-shadow用来设置元素的阴影,和轮廓一样,阴影也不会影响页面的布局 box-shadow值 inset内部阴影 第一个值,阴影的水平偏移量 正值向右移动,负值向左移动 第二个值,阴影的垂直偏移量 正值向下移动,负值向上移动 第三个值,阴影的模糊半径 第四个值,阴影的颜色 */ /* box-shadow: inset 10px 10px 30px #000000; */ /* box-shadow:inset -10px 20px 5px #000000; */ box-shadow: 20px 20px 20px rgba(0,0,0,.5); } </style> </head> <body> <div class="box"></div> </body> </html>
本文来自博客园,作者:氯丙嗪,转载请注明原文链接:https://www.cnblogs.com/YcxyH/p/16260148.html