- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试仅使用 CSS 创建一个独特的形状。
这是我目前拥有的:http://jsfiddle.net/u6vu96u8/
但是,半圆底部的 flat
太多了。有没有可能,我可以让曲线正好在中间相交而没有平线?
代码:
button {
font-size: 1em;
background: #ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #1588cb;
color: #1588cb;
font-weight: 400;
height: 60px;
width: 300px;
position: relative;
margin: 25px 0 50px 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
.full-circle {
border: 1px solid #1588cb;
height: 35px;
width: 45px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
border-radius: 0 0 45px 45px;
border-top: none;
height: 15px;
background: #ffffff;
position: absolute;
left: 50%;
margin-left: -17px;
bottom: -16px;
line-height: 0;
}
<button>News
<span class="full-circle">+</span>
</button>
最佳答案
您的全圆类的宽度为 45 像素,而边框半径为 30 像素。如果你希望它是一个半圆,你需要与宽度相同的边框半径。将宽度更改为 30px 似乎可以满足您的要求(尝试一下)
关于html - CSS 半圆效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33652889/
在 flutter 打中,我想剪辑Container的可选部分以制作此小部件: 裁剪小部件,使其顶部和底部有两个半圆。 对于此裁剪的小部件的某些功能,我希望具有一些可选功能,例如: 剪裁顶部,该可选内
我怎样才能画这样的半圆? 代码: class DrawHalfCircleClipper extends CustomClipper { @override Path getClip(Size
下面是一个二值图像,我想在其中检测“山丘”、半圆、切口……在下图中的红色圆圈中。检测不一定要精确,我只需要知道图片中有这样的东西即可。我正在考虑使用一种线扫描方法并计算线上的黑色像素并用某种“聪明人”
有什么办法可以解决这个问题吗?我尝试更改 border-radius 值并进行了大量搜索,只是为了实现下图中的设计。我想我错过了一些东西,任何人都可以指出我的风格有什么问题。 这是代码。 #wrap
我正在尝试创建一个有 5 个线段的半圆,如下图所示,我可以在其中轻松调整各个线段之间的间距以及线段本身的大小。 CSS 半圆示例 我是前端开发的新手,但我尝试了几种资源,以便在来这里之前自己解决这个问
我做了一个半圆,我想按照我需要的百分比给它上色。文本的位置暂时无关紧要。我想要的是将 50% 的边框着色。稍后我将需要 70% 和 80%。我该怎么做? .info__radius__outline
我正在试验 SVG 元素。我正在尝试创建一个简单的半圆,但由于某种原因我的半圆旋转了?如何让半圆不旋转? 我的方法是: SVG“ Canvas ”为 400 x 400 像素,半圆的半径为 180 像
我有一个包含如下数字的实心圆圈: 我如何将它分成两个半圆,以便我可以在其中存储两个不同的数字,如下所示: 我的 CSS 如下: .oval { display: inline-block;
我正在开发一个 Asp.Net MVC 应用程序,其中有一个布局页面,我在其中看到一个像半圆的白色补丁,我试图删除但没有成功。 CSS html { background-color: bla
我需要在 WPF 中绘制一个半圆/半圆。知道怎么做吗?感谢您的任何提示! 最佳答案 ArcSegment将是一个很好的起点。 和here是如何在代码中使用它的一个很好的例子。 关于c# - WPF/C
我正在使用 Highcharts js,我正在尝试用 highCharts 绘制饼图这是一个半圆,里面嵌入了一些文本。 和到目前为止我所做的是 我的 html 标记是
我正在用一张婴儿的动画脸制作一些 CSS 动画,我正在尝试将嘴巴创建为特定的微笑形状。我需要的形状看起来像这样。注意左上角和右上角的圆 Angular : 你可以看到我到这里最近的。唯一缺少的是圆滑的
我正在尝试使用 rCharts 创建一个简单的半圆 donut 和 NVD3 JavaScript 库。下面提供了一个完整的 donut 的最小可重复示例。 library(rCharts) data
我正在尝试在我的 Angular 应用程序中创建一个 Highcharts 半圆圆环图。我已经安装了 Highcharts-ng 指令。无论出于何种原因,它似乎完全跳过了 plotOptions 部分
我是一名优秀的程序员,十分优秀!