css快速写标签_快速提示：创建类似CSS3的票证标签

css快速写标签

标签是许多Web 2.0服务，网站，尤其是博客所熟悉的功能。 在本教程中，我们将使用CSS3创建类似票证的标签，而无需依赖任何图像。

以下是该过程的快速分解：

• 创建HTML标记。
• 设置主要标签的样式。
• 设置标签四个角的样式。
• 设置链接的样式。
• 在标签中添加打Kong的样式。

---

步骤1：HTML标头标记

首先让我们在文档的头部添加标记。 我们添加了两个样式表：“ tut.css”和“ tickets.css”； 您可以在想要实现自己的工作时删除前者，但是我们将在演示中使用它。 样式表“ tickets.css”包含将格式化我们的工具提示的所有样式。 这是我们的文件头标记：

<meta charset="utf-8">
    <title>Pure CSS3 Ticket-like Tags</title>
    <link rel="stylesheet" href="styles/tut.css" />
    <link rel="stylesheet" href="styles/tickets.css" />

---

步骤2：HTML标记标记

现在，我们需要为标签添加标记。 我们使用了一个部门与我们将使用它的风格标签类属性票每个标签。 然后我们有了一个带有class属性circle的跨度。 最后，您会看到一个带有标签文本的链接。 这是标签标记（我添加了四个标签作为示例，但您可以根据需要添加任意数量）：

<div class="ticket"><span class="circle"></span><a href="#">CSS3</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">HTML5</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">Design</a></div>
    <div class="ticket"><span class="circle"></span><a href="#">Development</a></div>

---

步骤3：CSS主要标签

让我们开始设计主要标签div（ .ticket ）的样式。 在这里，我们设置字体样式，将位置设置为relative以便我们可以在其中设置绝对位置元素（注意它具有!important因为没有它，我们将无法获得所需的结果），背景色， left浮动，也可以设置right ，最后是一些填充和间距边距。

.ticket {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 7px 3px;
    margin: 0 5px 5px 0;
}

我们的标签应如下所示。

---

步骤4：CSS上角

现在，我们对顶部的两个角进行样式设置，使其看起来像一个四分之一圆的切口。 为了创建这个，我们将在after和before使用伪元素。 这两个伪元素具有相同的样式，唯一的区别是after位于左侧，而before位于右侧。

首先将内容值设置为z-index ，将absolute ， z-index的位置设置为100或任何较大的正值，然后从上，左或右以及零开始设置其位置。 设置border-bottom样式和left或right，然后最后将border-radius设置为20px （ after右下角和before左下角。

要了解有关使用CSS边框样式创建形状的更多信息，可以查看此内容
指导 。

.ticket:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 20px 0;
    -webkit-border-radius: 0 0 20px 0;
    border-radius: 0 0 20px 0;
}

.ticket:before {
    content: "";
    position: absolute !important;
    z-index: 100;
    top: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-bottom: #fff 7px solid;
    -moz-border-radius: 0 0 0 20px;
    -webkit-border-radius: 0 0 0 20px;
    border-radius: 0 0 0 20px;
}

我们的标签应如下所示。

---

第5步：标签中的CSS链接

在链接中，我们现在可以通过使用边框和轮廓来创建缝合效果。 我们用带有40％透明白色的虚线1px轮廓对链接进行样式设置，使用30％透明黑色设置边框，填充以使缝合在边缘上看起来更逼真，没有文字装饰，将文本颜色设置为50％透明白色（这样我们就不必在每次更改标签的背景颜色时都更改文本颜色）并将空白设置为nowrap 。 最后，我们将悬停状态文本颜色设置为50％透明黑色。

.ticket a {
    outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}

.ticket a:hover {color: rgba(0,0,0,0.5);}

我们的标签现在应该看起来像这样。 请注意，两个切口角均位于针迹的顶部。

---

步骤6：CSS底角

对于底角我们也将使用伪元素after和before但是链接在这段时间内。 这两个角的样式显然类似于顶角，我们只是更改位置和边框以匹配它们的位置。

.ticket a:after {
    content: "";
    position: absolute !important;
    z-index: 100;
    bottom: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 0 20px 0 0;
    -webkit-border-radius: 0 20px 0 0;
    border-radius: 0 20px 0 0;
}

.ticket a:before {
    content: "";
    position: absolute !important;
    z-index: 1000;
    bottom: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-top: #fff 7px solid;
    -moz-border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    border-radius: 20px 0 0 0;
}

现在，我们的标签应如下所示。

---

步骤7：CSS添加打Kong

在HTML标记中，我们已经添加了一个带有类名circle的空span元素，它主要用于创建我们的穿Kong效果。 我们将再次使用borders和border-radius创建高度和宽度值为零的圆。 我们将其位置设置为absolute ，将z-index设置为一个较大的正数，从顶部开始50％，从左侧开始8px ，并带有一个框阴影，使它看起来更逼真，最后将-5px的上边距完美地对齐到中心。

.ticket .circle {
    position: absolute !important;
    z-index: 100;
    border: 5px #fff solid;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-top: -5px;
    width: 0;
    height: 0;
    top: 50%;
    left: 8px;
    -moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.3);
}

我们的标签应该看起来完整！

---

结论

我创建这些票证的方法确实存在问题。 如果更改了背景色，则四个角和打Kong不会改变颜色。 换句话说，它们不是透明的，并且每次更改背景颜色时都需要更改它们的颜色。

至于浏览器兼容性，已经过测试，可以在Firefox 4.5 + ， Chrome 13 ， Opera 11和IE9上运行 。

您的最终结果应类似于上图。 为了使最终结果看起来像我们的演示，您应该使用“ tut.css”中的样式，但可以随意添加自己的调整。

希望您都从本CSS教程中学到了一些技巧！ 在下面分享您的想法:)

翻译自: https://webdesign.tutsplus.com/articles/quick-tip-create-pure-css3-ticket-like-tags--webdesign-3899

css快速写标签