box-shadow border透明边框 按钮

原创 2017年10月11日 10:23:37
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="border-opacity1"></div>
  <div class="border-opacity2"></div>
  <span class="button">OK</span>
  <div class="box-shadow-base box-shadow-top"></div>
  <div class="box-shadow-base box-shadow-right"></div>
  <div class="box-shadow-base box-shadow-bottom"></div>
  <div class="box-shadow-base box-shadow-left"></div>
  <div class="box-shadow-base box-shadow-multiple"></div>
</body>
</html>
div{
  width:100px;
  height:100px;
}

.border-opacity1{
  border:10px solid hsla(182, 44%, 76%, .5); ;
  background:red;
  background-clip:border-box; /*默认 被边框的外边距裁剪*/
}
.border-opacity2{
  border:10px solid hsla(182, 44%, 76%, .5); ;
  background:red;
  background-clip:padding-box; /* 被内边距的外沿裁剪 */
  margin-top:10px;
}
.button{
  display:inline-block;
  margin-top:10px;
  padding:.3em .8em;
  border:1px solid rgba(0,0,0,.1);
  border-radius:.2em;
  box-shadow:0 .05em .25em rgba(0,0,0,.5);
  text-shadow:0 -.05em .05em rgba(0,0,0,.5);
  font-size:125%;
  color:#fff;
  line-height:1.5;
  background:#6b0;
}
/* 阴影尺寸负值为缩小阴影区域,正值为放大阴影区域(x,y轴同时作用) */
.box-shadow-base{
  margin-top:20px;
  border:1px solid #ccc;
}
.box-shadow-top{
  box-shadow:0 -2px 0 -1px deeppink;
}
.box-shadow-right{
  box-shadow:2px 0 0 -1px deeppink;
}
.box-shadow-bottom{
  box-shadow:0 2px 0 -1px deeppink;
}
.box-shadow-left{
  box-shadow:-2px 0 0 -1px deeppink;
}
.box-shadow-multiple{
  margin:0 auto;
  box-shadow:0 0 0 5px deeppink,
             0 0 0 10px green,
             0 0 0 15px yellow;
}
/* box-shadow是层层叠加的,第一层投影位于最顶层,以此类推 */

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016年06月09日 00:07
  • 3658

微信小程序css篇----边框(Border)

一.边框:border 设置对象边框的特性。 1.语法:border:length   style  color  2.style:none ,hidden,dotted,dashed,solid,d...
  • qq_32067045
  • qq_32067045
  • 2016年12月30日 11:22
  • 18533

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016年07月19日 15:49
  • 3107

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016年07月19日 15:49
  • 3107

CSS3中border-radius、box-shadow与gradient那点事儿

  • 2015年09月29日 10:17
  • 39KB
  • 下载

CSS并不简单--走进border、box-shadow和outline

这篇文章主要介绍标题中三个属性独特的一面。不独特你打我): 一、border  其实对于border,想必大家已经了解很多了。所以我就不啰嗦太多的基本东西。  第一点我们要知道border的真实面貌:...
  • dai_qingyun
  • dai_qingyun
  • 2017年05月19日 12:35
  • 461

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016年06月09日 00:07
  • 3658

如何给边框添加阴影效果:box-shadow

css的box-shadow是用来添加边框阴影效果的。 属性值详解: 1、inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴...
  • zzqwxx
  • zzqwxx
  • 2016年07月13日 10:54
  • 6755

css3 边框阴影 box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径]...
  • Lucky_bo
  • Lucky_bo
  • 2017年05月09日 15:14
  • 351

HTML5结构标签、border-radius、box-shadow与text-shadow

一. border-radius 使用border-radius用来设置圆角。语法:border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 ra...
  • suyongsimple
  • suyongsimple
  • 2015年03月24日 01:14
  • 715
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:box-shadow border透明边框 按钮
举报原因:
原因补充:

(最多只允许输入30个字)