1.
(图片取自W3C school)
blur: 羽化的一个效果
阴影默认是外侧阴影
示例代码:
#shad{ width: 200px; height: 200px; border: #5f5f5f solid 1px; border-radius: 10px; box-shadow: 5px 5px 5px dimgrey ; }
<div id="shad"></div>
运行效果:
3.父级相对,子级绝对的时候,就是以父级为原点进行定位的
4.过渡经常和hover搭配使用,而不是写在hover里面
过渡+阴影的小案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D旋转</title> <style type="text/css"> div{ width: 30px; height: 30px; margin: 100px auto; border-radius: 50%; box-shadow:0 0 0 1px #ccc inset ; transition: box-shadow 0.5s ease-in 0s; /*添加阴影box-shadow的过渡*/ } div:hover{ box-shadow: 0 0 0 15px #31708f inset; } </style> </head> <body> <div></div> </body> </html>
运行效果:
鼠标移上去之后:
5.上述的代码做一些调整,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D旋转</title> <style type="text/css"> div{ width: 30px; height: 30px; margin: 100px auto; border-radius: 50%; box-shadow:0 0 0 1px #ccc inset ; /*如果有两个过渡,两个过渡是要写在一起的,中间用逗号隔开*/ transition:box-shadow 0.5s ease-in 0s, transform 0.5s ease-in 0s; /*添加阴影box-shadow的过渡*/ } div:hover{ box-shadow: 0 0 0 15px #31708f inset; transform: rotate(180deg); /*本来是要.icon来旋转的,但是因为这次的div是圆形的,所以也可以用div来旋转*/ } .icon{ width: 100%; height: 100%; background: url("images/icon.png") no-repeat center center; } </style> </head> <body> <div> <div class="icon"></div> </div> </body> </html>运行效果:
鼠标移上去之前: 鼠标移上去之后: