盒子阴影box-shadow和文本阴影text-shadow

来源:互联网 发布:国内高薪职业 知乎 编辑:程序博客网 时间:2024/06/07 05:53

相关的说明和介绍都写在了注释中:


<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.div1{width: 300px;height: 200px;border:1px solid red;background: orange;/*box-shadow前面前面两个值是水平和垂直的偏移量,如果都是正值,那么就是右下,负值则相反*//*第三个参数为模糊距离,第四个参数为阴影伸展范围(增加模糊边界之前的实心颜色面积),默认为0。第五个参数为颜色,第四个参数为在元素内部,默认的是在元素外部*/box-shadow: 5px 5px 30px 10px gray inset;/*对于text-shadow,顺序有一点简单的变化,颜色放在最前面*/text-shadow: gray 10px 10px 7px;}</style></head><body><div class="div1">这里是</div></body></html>


原创粉丝点击