0

我的 HTML

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

在我的 CSS 中，我尝试将边框半径：100% 应用于图像，使其看起来像一个圆圈。当我做

.teaser{ border-radius: 100%; }它不会工作，但.teaser img{ border-radius: 100%; }它会。原因是什么？是因为border-radius属性不能级联还是因为img标签会忽略父母的属性。

4

4 回答 4

3

默认继承的属性

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/

于 2013-04-18T05:39:12.370 回答
3

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

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

于 2013-04-18T06:25:01.280 回答
2

border-radius不被继承

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

于 2013-04-18T05:43:56.790 回答
1

尝试这个

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>

演示

于 2013-04-18T06:52:22.993 回答