CSS border-radius:20px

OnyeApam

我想将border-radius设置为div.Blur div半径看起来像这样。我该如何解决?谢谢。

<div class="content" style="background-image:url('img/2.jpg');"><br>
<div class="caption"><br>
<div class="blur">/div> <br>
<h1>Click/h1><br>
</div> <br>
</div><br>

图片预览在这里(编辑)

CodePen示例在这里

.content
{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 20px solid #25a9e6;
}
.caption
{
    cursor: pointer;
    position: absolute;
    opacity: 0;<br>
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    transition: all 0.20s ease-in-out;
    height:100%;
}
.blur
{
    background-color: rgba(0,0,0,0.7);
    /*background-color: rgba(7, 194, 209, 0.75);*/
    width: 210px;
    height: 210px;
    z-index: 5;
    position: absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
希望D.

您可以添加.imageContent类:

border-radius: 50px;

但这也是临时解决方案...

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS过渡移除border-radius属性

来自分类Dev

CSS全宽减去边距左div,右对齐20px

来自分类Dev

由于 left: 20px; CSS 表不尊重容器大小;

来自分类Dev

CSS Arch是否可以使用border-radius?

来自分类Dev

如何使用CSS border-radius创建直角?

来自分类Dev

CSS:如何使用calc(100%-20px)来填充除固定宽度元素以外的所有区域?

来自分类Dev

Remove CSS background border

来自分类Dev

Bootstrap Popover Border CSS

来自分类Dev

Bootstrap Popover Border CSS

来自分类Dev

CSS标头未对齐。尝试使用顶部-20px菜单其余部分显示徽标,但未将其对齐

来自分类Dev

如何向下拉蚂蚁设计元素添加border-radius CSS属性?

来自分类Dev

根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius

来自分类Dev

CSS:IE 中的多个 bgs、bg clip 和 border-radius

来自分类Dev

CSS border - box without corners

来自分类Dev

CSS Border-box问题

来自分类Dev

ResponsiveGridSystem 1.6%= 20px:为什么?

来自分类Dev

ScrollTop到元素-20px

来自分类Dev

border-radius和-webkit-border-radius之间的区别

来自分类Dev

Google Chrome Border Radius问题

来自分类Dev

CSS:在具有border-radius的链接上显示表格单元:错误显示的边框和多余的边距

来自分类Dev

一个人如何才能将CSS属性(如border-radius)与transitionables一起使用

来自分类Dev

CSS border shorthand when each border has a different width

来自分类Dev

CSS 样式中 border 和 border-width 属性的区别

来自分类Dev

CSS Filters to create a solid border around an object

来自分类Dev

css border changes the div size completely?

来自分类Dev

使用CSS在Border中绘制曲线

来自分类Dev

填充前的css border-bottom

来自分类Dev

CSS Border Alpha无法正常工作

来自分类Dev

悬停CSS移除under / border-bottom

Related 相关文章

  1. 1

    CSS过渡移除border-radius属性

  2. 2

    CSS全宽减去边距左div,右对齐20px

  3. 3

    由于 left: 20px; CSS 表不尊重容器大小;

  4. 4

    CSS Arch是否可以使用border-radius?

  5. 5

    如何使用CSS border-radius创建直角?

  6. 6

    CSS:如何使用calc(100%-20px)来填充除固定宽度元素以外的所有区域?

  7. 7

    Remove CSS background border

  8. 8

    Bootstrap Popover Border CSS

  9. 9

    Bootstrap Popover Border CSS

  10. 10

    CSS标头未对齐。尝试使用顶部-20px菜单其余部分显示徽标,但未将其对齐

  11. 11

    如何向下拉蚂蚁设计元素添加border-radius CSS属性?

  12. 12

    根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius

  13. 13

    CSS:IE 中的多个 bgs、bg clip 和 border-radius

  14. 14

    CSS border - box without corners

  15. 15

    CSS Border-box问题

  16. 16

    ResponsiveGridSystem 1.6%= 20px:为什么?

  17. 17

    ScrollTop到元素-20px

  18. 18

    border-radius和-webkit-border-radius之间的区别

  19. 19

    Google Chrome Border Radius问题

  20. 20

    CSS:在具有border-radius的链接上显示表格单元:错误显示的边框和多余的边距

  21. 21

    一个人如何才能将CSS属性(如border-radius)与transitionables一起使用

  22. 22

    CSS border shorthand when each border has a different width

  23. 23

    CSS 样式中 border 和 border-width 属性的区别

  24. 24

    CSS Filters to create a solid border around an object

  25. 25

    css border changes the div size completely?

  26. 26

    使用CSS在Border中绘制曲线

  27. 27

    填充前的css border-bottom

  28. 28

    CSS Border Alpha无法正常工作

  29. 29

    悬停CSS移除under / border-bottom

热门标签

归档