css3——阴影(立体感,层次效果),渐变色按钮

  • Post author:
  • Post category:其他


box-shadow: 0px 0px 12px #97eaf9;

在这里插入图片描述


语法

box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。
  • spread 可选。阴影的尺寸。
  • color 可选。阴影的颜色。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。


从上到下渐变

 background: -moz-linear-gradient(top, #34dbfc 0%, #61a7fd 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34dbfc), color-stop(100%,#61a7fd));
 background: -webkit-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -o-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -ms-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: linear-gradient(to bottom, #34dbfc 0%,#61a7fd 100%);


从左到右渐变

  background: -moz-linear-gradient(left, #00cbcc 0%, #009bcc 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00cbcc), color-stop(100%,#009bcc));
  background: -webkit-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: -o-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: -ms-linear-gradient(left, #00cbcc 0%,#009bcc 100%);
  background: linear-gradient(to right, #00cbcc 0%,#009bcc 100%);



版权声明:本文为weixin_42301962原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。