Question

我的HTML

<div class="teaser">
<img src="smiley.gif">
</div>

在我的CSS中，我尝试将border-radius：100％应用于图像，使其看起来像一个圆圈。当我做的时候

.teaser{ border-radius: 100%; }它不起作用，但会.teaser img{ border-radius: 100%; }。原因是什么？是因为 border-radius 属性不能级联或是因为 img 标记会忽略来自父级的属性。

Answer 1

默认继承的属性

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
letter-spacing
list-style-type
list-style-position
list-style-image
list-style
line-height
orphans
page-break-inside
quotes
text-align
text-indent
text-transform
visibility
white-space
widows
word-spacing

来源：impressivewebs.com/

Answer 2

border-radius is not inherited

以下是CSS属性列表，以便您可以检查它是否继承：http://www.w3.org/community/webed/wiki/CSS/Properties

Answer 3

具体而言，对于border-radius，您应该使用overflow:hidden裁剪您的内容。

示例http://jsfiddle.net/pavloschris/FSK75/

Answer 4

试试这个

CSS

.teaser {
   border-radius: 100%;
   overflow: auto;
   display: table-caption;
}

HTML

<div class="teaser">
    <img src="http://lorempixel.com/output/animals-q-c-189-137-4.jpg">
</div>

Demo

并非所有CSS属性都能够级联，或者某些标签会忽略来自父级的属性？

4 个答案: