css3边框阴影效果box-shadow用法详解
2023-03-07 09:45:07 时间
案例演示如下:111
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin-top:100px;
margin-left:100px;
width:300px;
height:100px;
background-color:#ff9900;
box-shadow:20px 0px 30px 10px #abcdef inset;/zz/
/*这6个值分别是:left值 、top值、透明度、阴影外延宽度、颜色、向里凹陷(选填,默认为外延)*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其中前2个值的用法跟对背景图片进行定位时的用法差不多。
将/zz/前的那句代码替换为:box-shadow:0px 0px 30px 10px #abcdef;
效果图如下:
前4个属性均可设置为负值。
未经允许不得转载:肥猫博客 » css3边框阴影效果box-shadow用法详解
相关文章
- Seurat对象的构建和信息提取
- Java enum枚举配合switch使用
- Linux安装Node.js
- Linux安装git
- Linux安装Hexo,打造个人博客
- Hexo + Gitee安装部署(打造你的个人博客)
- 七十年编程语言发展漫谈
- 每周云安全资讯-2023年第7周
- 高效收集管理3d动画资源方法
- 活动预告|腾讯云工业AI大揭秘!这场合作伙伴交流会,不容错过!
- 如何制作Win10启动U盘启动盘iso镜像文件
- 云原生场景下,如何缓减容器隔离漏洞,监控内核关键路径?
- 数字文旅周报96期 | 马化腾:科技向善,就是要用科技能力更好地去关心人
- ChatGPT 在软件测试中七大应用方式
- RestTemplate自定义异常白名单,连接https
- SpringBoot Admin监控Spring程序
- 原淘宝 npm 域名即将停止解析,请切换至新域名(npm无响应)
- JUC - 线程中断与线程等待、唤醒(LockSupport)
- volatile与JMM
- CAS之比较并交换