如何在CSS3中创建阴影边框?

Youcam39

我想要创建此边框的秘密:

我想要的边框图像

鄂尔多斯语

这是一个例子:

<div id="box">Content</div>
#box {
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}


#box:before, #box:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

#box:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

参见JSFiddle代码来自于此页面:如何使用CSS3 box-shadow创建平滑效果

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在CSS3中创建此按钮?

来自分类Dev

如何在 CSS3 中创建对角线带?

来自分类Dev

如何在CSS中创建单行边框?

来自分类Dev

如何在Flutter中创建带有边框阴影的矩形?

来自分类Dev

如何在 ViewGroups 之间创建阴影底部边框?

来自分类Dev

如何在 css 中制作顶部和底部颜色不同,底部有阴影的边框?

来自分类Dev

CSS或CSS3中的左下角阴影效果

来自分类Dev

如何在CSS3中使用伪类创建自定义形状

来自分类Dev

如何在CSS中创建边框角间距

来自分类Dev

如何在CSS中创建凹形底部边框?

来自分类Dev

如何在CSS中单击时创建类似边框的Bootstrap

来自分类Dev

如何在HTML / CSS中创建此边框样式?

来自分类Dev

如何在CSS中创建自定义边框设计

来自分类Dev

如何使用CSS3制作图片阴影

来自分类Dev

如何使用CSS3产生阴影淡入的效果?

来自分类Dev

CSS3中p元素上的双重文本阴影

来自分类Dev

如何在CSS中删除按钮“阴影”

来自分类Dev

如何在CSS3中实现梯形?

来自分类Dev

如何在CSS3中覆盖伪类

来自分类Dev

如何在CSS3中制作闪烁的图像

来自分类Dev

如何在HTML5和CSS3中创建以下图像作为标题背景?

来自分类Dev

Javascript:如何创建CSS3动画

来自分类Dev

如何创建CSS3反弹效果

来自分类Dev

如何在HTML中创建独立的边框?

来自分类Dev

如何在html中创建[]边框?

来自分类Dev

悬停CSS3时阴影变暗

来自分类Dev

CSS3 过渡框阴影脉冲

来自分类Dev

如何在d3和SVG中创建阴影路径?

来自分类Dev

如何在CSS中打破文字的边框?