用css画加号减号

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局和外观。

类型

CSS画加号和减号主要通过伪元素（如::before和::after）和边框来实现。

应用场景

这种技术常用于按钮、图标或其他需要简单图形表示的元素。

示例代码

以下是使用CSS画加号和减号的示例代码：

加号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Plus Sign</title>
    <style>
        .plus-sign {
            width: 20px;
            height: 20px;
            border: 2px solid black;
            border-radius: 50%;
            position: relative;
        }
        .plus-sign::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 2px;
            background-color: black;
        }
        .plus-sign::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(90deg);
            width: 10px;
            height: 2px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="plus-sign"></div>
</body>
</html>

减号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Minus Sign</title>
    <style>
        .minus-sign {
            width: 20px;
            height: 2px;
            background-color: black;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="minus-sign"></div>
</body>
</html>

参考链接

常见问题及解决方法

问题：加号或减号显示不正确

原因：可能是由于伪元素的定位或尺寸设置不正确。

解决方法：

确保伪元素的content属性为空字符串。
检查伪元素的定位（如position: absolute）和变换（如transform: translate(-50%, -50%)）是否正确。
确保伪元素的宽度和高度设置正确。

问题：边框显示不正确

原因：可能是由于边框的宽度、样式或颜色设置不正确。

解决方法：

检查边框的宽度（如border-width: 2px）、样式（如border-style: solid）和颜色（如border-color: black）是否正确。
确保边框应用于正确的元素。

通过以上方法，可以解决大多数CSS画加号和减号时遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

使用android.graphics.Path从一个形状中移除另一个形状

、、

我试着画的是：我想从白色的基础形状中减去‘减号’。奇怪的是，这对减号很有效，但是如果我画一个加号，它不再减去它，而是将它添加到底层路径中。我的减去减号的代码如下所示[... draw the arrow ] subtract.moveTosubtract.rLineTo(0, -xBarHeight); base.

浏览 0提问于2012-01-02得票数 5

回答已采纳

4回答

计算数据库字段摘要的最快方法

我有一个ms-sql表，其结构如下：示例内容：Test1，“减号”，3我想要一个“名字”的总数(加符号=加号，减法符号=减号)Test1，2我想显示这些结果(并在添加新记录时更新它们).我正在寻找最快的解决方案！斯普拉克？快进光标？用.net计算？

浏览 6提问于2010-05-31得票数 1

回答已采纳

1回答

Jquery - BBC +/-按钮

、、

由于我的老板很喜欢bbc网站(www.bbc.com)，有没有人有什么建议，可以使用加号和减号按钮来创建控制列表中条目数量的功能？单击加号时会添加更多项，单击减号时会删除最下面的项。看起来这是用Jquery完成的，有人有什么建议吗？谢谢

浏览 0提问于2011-05-26得票数 0

回答已采纳

1回答

如何在按钮动作中添加和删除文本字段？

、

功能:当我点击加号按钮时，用加号按钮创建新的文本字段。但“上一个文本字段+”按钮被更改为“减号”按钮。当我单击减号按钮时，特定的文本字段将被删除。如果我尝试使用tableview，会出现很多错误。

浏览 8提问于2018-02-20得票数 0

回答已采纳

3回答

使用if then语句显示/隐藏div (javascript)

、、、

我在这里设置了这个显示/隐藏：如有任何帮助，我们不胜感激！

浏览 12提问于2012-06-19得票数 1

1回答

如何在GitKraken中“弃行”？

、

行可以很容易地用加号按钮“舞台本行”来分阶段。但如何“弃线”呢？是否有短缩，如何将行旁边的加号按钮改为减号按钮？

浏览 0提问于2019-03-27得票数 3

回答已采纳

2回答

用减号/加号按钮计算

、、、

我已经用console.log检查过了，然后调用了几次函数。在使用按钮时没有完成计算。以下是代码： <!

浏览 10提问于2022-03-18得票数 -1

3回答

我已经创建了带有加号和减号按钮的输入框，用来在点击按钮的同时增加和减少输入框的值。当输入值设置为零时，我将属性' disabled‘添加到减号按钮，但问题是，当页面加载时，默认情况下输入的值为零，但我需要单击减号按钮一次来添加属性'disabled’，这不是我正在寻找的，我想要的是当输入的值为零时，我希望减号按钮的属性设置为默认禁用，当我单击加号按钮时，它将删除'disabled‘属性形式的减号按钮。甚至我也尝试过用窗口加

浏览 32提问于2017-07-10得票数 1

回答已采纳

1回答

使JS/CSS菜单-悬停不正常工作

、、、、

活生生的例子是 $(document).ready(function() { $(".nav ul ul"

浏览 1提问于2012-07-29得票数 0

回答已采纳

1回答

需要将+/-字符替换为html代码(例如)小段jQuery中的&#8212；

、

单击时，加号将变为减号。再次单击时，两个减号都会变为加号。 html = html.replace('-','+'); return html;} 这是

浏览 1提问于2011-04-14得票数 0

回答已采纳

2回答

如何在扩展/关闭下拉列表时使用加/减圆圈

、、、

我正在使用字体很棒的CSS在下拉列表中显示加号圆圈，我想在下拉列表展开时将其更改为减号，反之亦然。任何示例都可能是help...thanks

浏览 2提问于2015-09-03得票数 0

5回答

用css做一个加号

、

我有一个模型来制作一个看起来很简单的加号。然而，我的css技能并不是非常好。画个圆圈没什么大不了的，但是在圆圈里画个加号我好像搞不懂。这就是我想要做的。样机 ? 到目前为止，我的代码如下： html <div class=circle></div> CSS .circle { width: 200px;height: 200px; background-color: rgb(44,1

浏览 191提问于2016-12-09得票数 11

回答已采纳

1回答