圆，半径自适应外层高度

约定不等于承诺〃 2022-08-22 15:24 154阅读 0赞

效果可查看[https://codepen.io/GitKou/pen/OXPggx][https_codepen.io_GitKou_pen_OXPggx]  
![这里写图片描述][20160601152432137]  
HTML：

CSS：

.m-edge { position: relative; height: 100px;/* 高度任意更改，半圆不变形*/ margin: 0 -1px; overflow: hidden; }
    
    .dashedLine { border-bottom: 1px dashed #A0A0A0; width: 100%; box-sizing: border-box; position: absolute; top: 50%; transform: translateY(-50%); }
    
    .semicircle { position: absolute; border: 1px solid #b1b1b1; border-radius: 50%; height: 100%; writing-mode: vertical-lr; z-index: 1000; background: #fff; box-sizing: border-box; }
    
    .semicircle:after { content: ""; padding-left: 100%; display: block; }
    
    .leftSemiCircle { left: -0.5px; transform: translateX(-50%); }
    
    .rightSemiCircle { right: -0.5px; transform: translateX(50%); }

注意几点：  
1.水平居中用到了:

position: absolute;
        top: 50%;
        transform: translateY(-50%);

2.半径随外层高度而改变：用到了　writing-mode: vertical-lr;垂直方向书写;核心代码如下“

<div class="m-edge">
      <div class="semicircle">
      </div>
    </div>
    
    
    .semicircle {
        position: absolute;
        border: 1px solid #b1b1b1;
        border-radius: 50%;
        height: 100%;
        writing-mode: vertical-lr;
        z-index: 1000;
        background: #fff;
        box-sizing: border-box;
    }
    
    .semicircle:after {
        content: "";
        padding-left: 100%;
        display: block;
    }
    .m-edge{
      height:550px;/* 可修改*/
      position:relative;
    }

.semicircle:after的 padding-left: 100%;会以父元素semicircle 的height做为基准，应为 writing-mode: vertical-lr;  
![这里写图片描述][20160601152744732]

writing-mode：
        horizontal-tb
        Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.
        vertical-rl
        Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.
        vertical-lr
        Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

--------------------

另外dashline可以用svg的dasharray来画  
[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray][https_developer.mozilla.org_zh-CN_docs_Web_SVG_Attribute_stroke-dasharray]

<?xml version="1.0"?>
    <svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
        <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
        <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
        <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
        <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
        <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
        <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
        <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
        <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
        <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
        <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />
    
    <style><![CDATA[line{ stroke: black; stroke-width: 2;}]]></style>
    </svg>

示例输出  
![这里写图片描述][20160601155036014]

[https_codepen.io_GitKou_pen_OXPggx]: https://codepen.io/GitKou/pen/OXPggx
[20160601152432137]: /images/20220722/4b3d2db8d2f443d1968b4cffd1465c3d.png
[20160601152744732]: /images/20220722/2c9367b923c248018f9d3c631923f2cb.png
[https_developer.mozilla.org_zh-CN_docs_Web_SVG_Attribute_stroke-dasharray]: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray
[20160601155036014]: /images/20220722/8392f9add78e4d5b9789171952713a0a.png