【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

圆,半径自适应外层高度

原创 2016年06月01日 15:32:46

效果可查看https://codepen.io/GitKou/pen/OXPggx
这里写图片描述
HTML:

 <div class="m-edge" style="margin-top: 50px">
        <div class="semicircle leftSemiCircle"></div>
        <div class="dashedLine"></div>
        <div class="semicircle rightSemiCircle"></div>
 </div>

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;
这里写图片描述

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

<?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>

示例输出
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Android面试题【高级工程师版】

Android 高级(★★★) 一、Android性能优化(11.9 更新) 1、如何对 Android应用进行性能分析 一款 App 流畅与否安装在自己的真机里,玩几天就能有个大概的感性认识。不过通...

两个div嵌套,外层div高度固定,内层div高度增长,显示滚动条

两个div嵌套,当内层div的高度增长时,外层div的高度被也被撑大,而不是出现滚动条 解决方法:设置最内层div的高度和overflow,注意:是最内层的div 还不行,在设置外层div的高度和overflow:hidden试试

opencv处理函数记录_转自opencv中文网站

opencv图像处理记录

ECharts详细说明

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库<a href="http://ecomfe.gith

android百度地图半径画圆

[code="java"] import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Path; import android.graphics.Point; import android.os.Bundle; import com.baidu.mapapi.BMa
  • iaiai
  • iaiai
  • 2012-04-21 15:18
  • 1669
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)