当前位置：首页> 文章> CSS
全部 45 CSS 18 HTML 6 SEO 2 JS 6 服务器 1 Vue 10 小程序 1 PHP 1

使用 box-shadow 属性来为按钮添加阴影

：2019-05-20   ：舒彬琪   ：75

使用 box-shadow 属性来为按钮添加阴影:
可以设置为默认显示阴影或者是鼠标悬浮（hover）显示阴影
transition 可以用于设置变化所需的时长
基础说明：

    外阴影：box-shadow: X轴  Y轴  Rpx  color;
    属性说明（顺序依次对应）： 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色
    内阴影：box-shadow: X轴  Y轴  Rpx  color  inset;
       默认是外阴影   内阴影：inset 可以设置成内部阴影
    注（PS）：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影   如果设置文字阴影请参考知识点:text-shadow（同理）因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。
Firefox浏览器则需要写成-moz-box-shadow的形式
欧朋浏览器  -o-box-shadow   
IE>9  -ms-box-shadow   


  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8"> 

  5. <title>BBQ前端博客(blog.syabq.cn)</title> 

  6. <style>

  7. .button {

  8.     background-color: #4CAF50; /* Green */

  9.     border: none;

  10.     color: white;

  11.     padding: 15px 32px;

  12.     text-align: center;

  13.     text-decoration: none;

  14.     display: inline-block;

  15.     font-size: 16px;

  16.     margin: 4px 2px;

  17.     cursor: pointer;

  18.     -webkit-transition-duration: 0.4s; /* Safari */

  19.     transition-duration: 0.4s;

  20. }


  22. .button1 {

  23.     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

  24. }


  26. .button2:hover {

  27.     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

  28. }

  29. </style>

  30. </head>

  31. <body>


  33. <h2>按钮阴影</h2>

  34. <p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p>


  36. <button class="button button1">阴影按钮</button>

  37. <button class="button button2">鼠标悬停后出现阴影</button>


  39. </body>

  40. </html>


上一篇：CSS里的display属性

下一篇：CSS浏览器兼容性？

Copyright © 2018-现在 PbootMoBan All Rights Reserved. 免责声明：网站中图片均来源于网络，如有版权问题请联系删除！