如何为轮廓属性创建半径。

huangapple
go评论76阅读模式
英文:

how to make radius for outline property

问题

  1. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  3. <!-- 语言：lang-css -->
  5.     .myElement {
  6.       width: 200px;
  7.       height: 100px;
  8.       border: 3px solid #0064d2;
  9.       outline: solid red;
  10.       border-radius: 30px;
  11.     }
  13. <!-- 语言：lang-html -->
  15.     <div class="myElement"></div>
  17. <!-- 结束代码片段 -->
  19. 我想创建一个带有矩形红色轮廓的圆角蓝色边框，但border-radius影响了轮廓并使其变成圆形
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .myElement {
  2.   width: 200px;
  3.   height: 100px;
  4.   border: 3px solid #0064d2;
  5.   outline: solid red;
  6.   border-radius: 30px;
  7. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;myElement&quot;&gt;&lt;/div&gt;

<!-- 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。

  1. .myElement {
  2.     width: 200px;
  3.     height: 100px;
  4.     outline: solid red;
  5.     padding: 10px;
  6.     position: relative;
  7. }
  9. .myElement::after {
  10.     content: "";
  11.     border: 3px solid #0064d2;
  12.     border-radius: 30px;
  13.     display: inline-block;
  14.     width: 80%;
  15.     height: 80%;
  16.     transform: translate(10%, 10%);
  17. }
  1. <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 -->

  1. .myElement {
  2.     width: 200px;
  3.     height: 100px;
  4.     outline: solid red;
  5.     padding: 10px;
  6.     position: relative;
  7. }
  9. .myElement::after {
  10.     content: &quot;&quot;;
  11.     border: 3px solid #0064d2;
  12.     border-radius: 30px;
  13.     display: inline-block;
  14.     width: 80%;
  15.     height: 80%;
  16.     transform: translate(10%,10%);
  17. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;myElement&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 00:01:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76475497.html
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定