英文:
how to make radius for outline property
问题
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
.myElement {
width: 200px;
height: 100px;
border: 3px solid #0064d2;
outline: solid red;
border-radius: 30px;
}
<!-- 语言：lang-html -->
<div class="myElement"></div>
<!-- 结束代码片段 -->
我想创建一个带有矩形红色轮廓的圆角蓝色边框，但border-radius影响了轮廓并使其变成圆形
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.myElement {
width: 200px;
height: 100px;
border: 3px solid #0064d2;
outline: solid red;
border-radius: 30px;
}
<!-- language: lang-html -->
<div class="myElement"></div>
<!-- end snippet -->
I want to create a rounded blue border with rectangular red outline but border-radius impacts on outline and makes it round
答案1
得分: 2
你可以使用::after来将轮廓与边框分开：
你可以通过修改百分比来改变大小，我以父元素的80%作为示例。
要使元素居中，使用剩余空间的一半进行transform translate。
.myElement {
width: 200px;
height: 100px;
outline: solid red;
padding: 10px;
position: relative;
}
.myElement::after {
content: "";
border: 3px solid #0064d2;
border-radius: 30px;
display: inline-block;
width: 80%;
height: 80%;
transform: translate(10%, 10%);
}
<div class="myElement"></div>
英文:
You can use an ::after to separate the outline from the border:
You can change the size by altering the percentage, i've used 80% of the parent as example.
To center the element, use transform translate of half of the remaining space
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.myElement {
width: 200px;
height: 100px;
outline: solid red;
padding: 10px;
position: relative;
}
.myElement::after {
content: "";
border: 3px solid #0064d2;
border-radius: 30px;
display: inline-block;
width: 80%;
height: 80%;
transform: translate(10%,10%);
}
<!-- language: lang-html -->
<div class="myElement"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论