CSS box-shadow 属性调整

标签 css

我正在尝试基于此图像创建一个框:http://i.imgur.com/eTa6poY.png

这是我目前所拥有的:http://jsbin.com/qiwaq/1/edit

...不过边框好像还是有点的。我错过了什么?

最佳答案

修改box-shadow值设置h-shadow 2px, v-shadow 2px, blur 10px and展开0px

 box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);

box-shadow 语法

 box-shadow: h-shadow v-shadow blur spread color;

HTML代码

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>CSS Box</title>
  </head>
  <body>
   <div class="the-box">
   </div>
  </body>
</html>

CSS 代码

.the-box {
   background-color: rgb(244, 244, 244);
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);
   width: 518px;
   height: 330px;
   margin-top: 10%;
   margin-left: auto;
   margin-right: auto;

演示 jsBin

关于CSS box-shadow 属性调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22163362/

相关文章:

html - 按钮悬停,图像变暗

css - 不能将边距和填充设置为 0

css - 多个 div,有的在左,有的在右,都与 CSS 垂直对齐

html - 百分比宽度和百分比填充

javascript - 根据最后输入的值,应在下拉列表中启用复选框

html - 在中心 div 的左右对齐 div

html - 在 div 中显示文本,但将其视为背景图像

html - 与博客内容一起运行的粘性横幅

javascript - 在 wordpress 中使用 codepen 示例不起作用

html - 如何在不使用图像且不添加任何标记的情况下在 css 中将边框作为背景?