html - 应用 border-radius 而不将它应用到 box-shadow

Question

是否可以对 div 应用边框半径，但不对框阴影应用相同的“圆度”？我使用没有模糊的 box-shadow 来有效地为一个 div 创建两个边框，但是浅蓝色的 box-shadow 需要被方形化。

谢谢!

Answer 1

您可以使用 outline CSS 属性。 ^{(Outline works in all browsers, except IE7 and below.)}

HTML:

<div class="box"></div>

CSS:

div {
    height: 20px;
    width: 20px;
}

.box {
    border-radius: 5px;
    outline: 1px solid black;
    background-color: red;
}

fiddle :http://jsfiddle.net/xN4pF/

---

或者你可以嵌套一个<div>在另一个。

HTML:

<div class="shadow">
  <div class="round"></div>
</div>

CSS:

div {
    height: 20px;
    width: 20px;
}

.shadow {
    box-shadow: 0 0 0 1px black;
}
.round {
    border-radius: 5px;
    background-color: red;
}

fiddle :http://jsfiddle.net/DzCK9/1/