css阴影怎么做

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

css阴影怎么做

在css中,可以使用box-shadow属性来设置阴影,语法“box-shadow:X轴 Y轴 大小 颜色 inset”;其中“inset”值是可选的,加上时该阴影表示内阴影,不加时该阴影表示外阴影。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

box-shadow为css阴影设置,其中分为外阴影和内阴影,一般默认为外阴影

外阴影的属性为:X轴 Y轴 px color 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色
<style> .one{  margin: auto;  width: 200px;  height: 200px;  border: 1px solid #ffa;  box-shadow: 0 0 20px #000; }</style><body><p class="one"> </p></body>
登录后复制

其结果为:

内阴影的属性为:X轴 Y轴 px color inset 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 inset
<style> .one{  margin: auto;  width: 200px;  height: 200px;  border: 1px solid #ffa;  box-shadow: 0 0 20px #000 inset; }</style><body><p class="one"> </p></body>
登录后复制

其结果为:

若配合css3动画效果,会更加神奇

推荐学习:css视频教程

以上就是css阴影怎么做的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:Bootstrap中怎么添加导航组件和选项卡组件?用法浅析
下一篇:如何利用HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码的功能

发表评论

关闭广告
关闭广告