html - 边界半径问题

标签 html css

我是 html/css 的新手,我知道这个问题以前被问过很多次,但答案没有帮助/无法理解它们。我认为这与我在 html 端安排页面的方式有关。谢谢

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div.img {
  opacity: 0.3;
  border-radius: 44px background-color:#555;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Let Go</title>
</head>


<body>
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>
</body>

</html>

最佳答案

在图像上做半径,而不是包含它的元素。另外,在设置背景色之前,您缺少半色

div.text {
  color: yellow;
  font-family: sans-serif;
  background-color: blue;
  line-height: 6em;
  text-align: center;
}

div img {
  opacity: 0.3;
  border-radius: 44px; 
  background-color:#555;
}
  <div class="text">
    <h1>Lore Ipsum?</h1>
  </div>
  <div class="img">
    <img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">

  </div>

关于html - 边界半径问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43551702/

相关文章:

javascript - d3.js : attribute setting not working after binding data and entering elements

html - 无法以特定屏幕比例定位 IE10 和 IE 11 css

javascript - 一个轮播页面 Bootstrap 中的多个元素

html - 如何使用 CSS 将导航栏更改为选项卡?

css - 制作一个 Sass mixin,将部分 CSS 写入不同的 CSS 文件

html - 无法将百分比宽度框置于百分比宽度框内

html - 当我包含 DOCTYPE 时页面不显示任何内容...我的第 100 个问题?

javascript - 我如何从插槽子定义与 vue 2.x 中的包含组件进行通信?

javascript - 对于多个添加的元素,自动滚动溢出元素不会继续

CSS:放置子元素 "underneath"父元素的插入框阴影?