关闭

box-shadow border透明边框 按钮

标签: css
38人阅读 评论(0) 收藏 举报
分类:
<!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是层层叠加的,第一层投影位于最顶层,以此类推 */

这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2972次
    • 积分:143
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:1篇
    • 评论:2条
    文章分类
    文章存档
    最新评论