html{
    box-sizing: border-box;
    font-size: 100%;
}

*,
*::before,
*::after{
    margin: 0; 
    padding: 0;
    box-sizing: inherit;
}

.div{
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: hsla(0, 100%, 50%, 0.151);
    transform: translate(-50%,-50%);
    padding: 10px 40px;
}
.div::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 1px solid red;
    border-top: 1px solid red;
    border-radius: 3px 0px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="div">
        <p>hello</p>
    </div>
</body>
</html>

我试图用相同的边界半径属性将div设计的伪元素添加到div的所有四个侧面,但似乎只能使用::After和::Being将伪元素添加到两个侧面.

推荐答案

您可以向div添加边框,并使用伪类:before&;:after来屏蔽边缘.

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 40px;
  border: 1px solid red;
  border-radius: 3px;
  background-color: #ffd8d8;
}

.div::after,
.div::before {
  content: '';
  position: absolute;
  background-color: #ffd8d8;
  z-index: -1;
}

.div::after {
  top: -1px;
  left: 50%;
  width: 90%;
  height: calc(100% + 2px);
  transform: translate(-50%, 0);
}

.div::before {
  top: 50%;
  left: -1px;
  height: 90%;
  width: calc(100% + 2px);
  transform: translate(0, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="div">
        <p>hello</p>
    </div>
</body>
</html>

Html相关问答推荐

一次悬停可触发同一分区中的另一次悬停

如何防止下拉菜单内的Bootstrap列表行包装?

如何在一个div中心字体图标?

如何在angular 17.2中使用routerLink解决此错误

Angular 15 p-对话框不使用组件 Select 器呈现HTML

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

带有下拉菜单的完整css导航-链接不起作用?

从html文件中提取元素的Python BeautifulSoup

div居中碰撞问题

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

为什么
标签在 Edge 和 Firefox 中的编号会有两种不同的结果?

CSS 网格跨度行到所有行

HTML 如何根据屏幕尺寸调整/裁剪视频背景?

是否可以为长 huxtable 固定头部?

在 html 邮箱的左侧和右侧制作多个元素很热门吗?

font awesome 的 CDN/CSS 如何工作?

是否可以设置用户在联系表单中输入的文本字体的样式

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

SVG 适用于 Safari,不适用于 Chrome

调整窗口大小时试图阻止按钮移动