blocks|key|387437|text|基本思想:对于a.boxclose：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|387438|border-radius:+40px;
width:20px;
height+10px;
background-color:+#c0c0c0;
border:+1px+solid+black;
color:+white;
padding-left:+10px;
padding-top:+4px;|code-block|syntax|javascript|387439|将"X“添加到关闭框的内容中。|387440|http://jsfiddle.net/adzFe/1/|offset|length|387441|又快又脏，但很管用。|387442|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|S|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$K|Z|L|10|1|11]]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]]]

<p>Basic idea: For the a.boxclose:</p>

<pre><code>border-radius: 40px;
width:20px;
height 10px;
background-color: #c0c0c0;
border: 1px solid black;
color: white;
padding-left: 10px;
padding-top: 4px;
</code></pre>

<p>Adding a "X" to the content of the close box.</p>

<p><a href="http://jsfiddle.net/adzFe/1/" rel="noreferrer">http://jsfiddle.net/adzFe/1/</a></p>

<p>Quick and dirty, but works.</p>


blocks|key|387480|text|我在这上面花了太多的时间，由于显而易见的原因，我没有在IE中进行测试。话虽如此，但它们几乎是一样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|387481|http://jsfiddle.net/adzFe/14/|offset|length|387482|a.boxclose{
++++float:right;
++++margin-top:-30px;
++++margin-right:-30px;
++++cursor:pointer;
++++color:+#fff;
++++border:+1px+solid+#AEAEAE;
++++border-radius:+30px;
++++background:+#605F61;
++++font-size:+31px;
++++font-weight:+bold;
++++display:+inline-block;
++++line-height:+0px;
++++padding:+11px+3px;+++++++
}

.boxclose:before+{
++++content:+"×";
}|code-block|syntax|javascript|387483|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|T|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>I spent more time on this than I should have, and haven't tested in IE for obvious reasons. That being said, it's pretty much identical.</p>

<p><a href="http://jsfiddle.net/adzFe/14/" rel="noreferrer">http://jsfiddle.net/adzFe/14/</a></p>

<pre><code>a.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";
}
</code></pre>


blocks|key|387504|text|如果你想要纯css，没有字母"x"....|type|unstyled|depth|inlineStyleRanges|entityRanges|data|387505|这里有一些很棒的实验图标，其中包括一个由CSS：http://nicolasgallagher.com/pure-css-gui-icons/demo/组成的圆圈中的"x“。|offset|length|387506|entityMap|0|LINK|mutability|MUTABLE|url|http://nicolasgallagher.com/pure-css-gui-icons/demo/^0|0|O|1G|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>If you want pure css, without the letter "x"....</p>

<p>Here are some awesome experimental icons that include an "x" in a circle that is made with CSS: <a href="http://nicolasgallagher.com/pure-css-gui-icons/demo/" rel="nofollow">http://nicolasgallagher.com/pure-css-gui-icons/demo/</a></p>


blocks|key|387566|text|这只是一个想法--如果你的目标不是IE7，你可以使用any+image+being+base64-encoded+and+embedded+into+css。我假设你的目标是避免不必要的http请求，而不是把css按钮作为自己的目标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|387567|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1124149/embedding-background-image-data-into-css-as-base64-good-or-bad-practice^0|Q|1G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Just a thought - if you're not targeting IE7, you could get away with <a href="https://stackoverflow.com/questions/1124149/embedding-background-image-data-into-css-as-base64-good-or-bad-practice">any image being base64-encoded and embedded into css</a>. I'm assuming your goal is to avoid an unnecessary http request rather than  to actually make a css button as its own goal.</p>


blocks|key|387661|text|这里令人失望的是"X“是不透明的(至少这是我创建PNG的方式)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|387662|我做了这个快速测试。http://jsfiddle.net/UM3a2/22/embedded/result/，它允许您对正片空间进行着色，同时使负片空间保持透明。因为它完全由边框组成，所以很容易着色，因为边框颜色默认为文本颜色。|offset|length|387663|它不完全支持i.e.8和更早的版本(边界半径问题)，但它可以很好地降级为正方形(如果你可以使用正方形关闭按钮)。|387664|它还需要两个HTML元素，因为每个选择器只允许两个伪元素。我不知道我从哪里学到的，但我想它是在Chris+Coyier的一篇文章中学到的。|387665|<div+id="close"+class="arrow-t-b">
++Close
++<div+class="arrow-l-r">+</div>
</div>

#close+{
++border-width:+4px;
++border-style:+solid;
++border-radius:+100%25;
++color:+#333;
++height:+12px;
++margin:auto;
++position:+relative;
++text-indent:+-9999px;
++width:+12px;
}
#close:hover+{
++color:+#39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after,+
.arrow-l-r:before+{
++border-color:+transparent;
++border-style:+solid;
++border-width:+4px;
++content:+"";
++left:+2px;
++top:+0px;
++position:+absolute;
}
.arrow-t-b:after+{
++border-top-color:+inherit;
}
.arrow-l-r:after+{
++border-right-color:+inherit;
++left:+4px;
++top:+2px;
}
.arrow-t-b:before+{
++border-bottom-color:+inherit;
++bottom:+0;
}
.arrow-l-r:before+{
++border-left-color:+inherit;
++left:+0;
++top:+2px;
}|code-block|syntax|javascript|387666|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/UM3a2/22/embedded/result/^0|0|A|19|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>The disappointing thing here is that the "X" isn't transparent (which is how I would likely create a PNG, at least).</p>

<p>I put together this quick test. 
<a href="http://jsfiddle.net/UM3a2/22/embedded/result/" rel="nofollow">http://jsfiddle.net/UM3a2/22/embedded/result/</a> which allows you to color the positive space while leaving the negative space transparent. Since it is made entirely of borders it is easy to color since border-color defaults to the text color.</p>

<p>It doesn't fully support I.E. 8 and earlier (border-radius issues), but it degrades to a square fairly nicely (if you're okay with a square close button).</p>

<p>It also requires two HTML elements since you are only allowed two pseudo elements per selector. I don't know exactly where I learned this, but I think it was in an article by Chris Coyier. </p>

<pre><code>&lt;div id="close" class="arrow-t-b"&gt;
  Close
  &lt;div class="arrow-l-r"&gt; &lt;/div&gt;
&lt;/div&gt;

#close {
  border-width: 4px;
  border-style: solid;
  border-radius: 100%;
  color: #333;
  height: 12px;
  margin:auto;
  position: relative;
  text-indent: -9999px;
  width: 12px;
}
#close:hover {
  color: #39F;
}
.arrow-t-b:after,
.arrow-t-b:before,
.arrow-l-r:after, 
.arrow-l-r:before {
  border-color: transparent;
  border-style: solid;
  border-width: 4px;
  content: "";
  left: 2px;
  top: 0px;
  position: absolute;
}
.arrow-t-b:after {
  border-top-color: inherit;
}
.arrow-l-r:after {
  border-right-color: inherit;
  left: 4px;
  top: 2px;
}
.arrow-t-b:before {
  border-bottom-color: inherit;
  bottom: 0;
}
.arrow-l-r:before {
  border-left-color: inherit;
  left: 0;
  top: 2px;
}
</code></pre>


blocks|key|603766|text|我尝试关闭图标，没有文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|603767|​|603768|.close-icon
{
++display:block;
++box-sizing:border-box;
++width:20px;
++height:20px;
++border-width:3px;
++border-style:+solid;
++border-color:red;
++border-radius:100%25;
++background:+-webkit-linear-gradient(-45deg,+transparent+0%25,+transparent+46%25,+white+46%25,++white+56%25,transparent+56%25,+transparent+100%25),+-webkit-linear-gradient(45deg,+transparent+0%25,+transparent+46%25,+white+46%25,++white+56%25,transparent+56%25,+transparent+100%25);
++background-color:red;
++box-shadow:0px+0px+5px+2px+rgba(0,0,0,0.5);
++transition:+all+0.3s+ease;
}|code-block|syntax|javascript|603769|<a+href="#"+class="close-icon"></a>|603770|603771|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>My attempt at a close icon, no text</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.close-icon
{
  display:block;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-width:3px;
  border-style: solid;
  border-color:red;
  border-radius:100%;
  background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
  background-color:red;
  box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="close-icon"&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|603811|text|我认为这是最好的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|603812|并使用简单的JS来实现此功能。|603813|<script>
function+privacypolicy(){
++++var+privacypolicy1+=+document.getElementById('privacypolicy');
++++var+privacypolicy2+=+('display:+inline;');
++++privacypolicy1.style=+privacypolicy2;
}
function+hideprivacypolicy(){
++++var+privacypolicy1+=+document.getElementById('privacypolicy');
++++var+privacypolicy2+=+('display:+none;');
++++privacypolicy1.style=+privacypolicy2;
}
</script>
<style+type="text/css">
++++++++++++.orthi-textlightbox-background{
++++++++++++++++background-color:+rgba(30,+23,+23,+0.82);
++++++++++++++++font-family:+siyam+rupali;+
++++++++++++++++position:+fixed;+top:0px;+
++++++++++++++++bottom:0px;+
++++++++++++++++right:0px;+
++++++++++++++++width:+100%25;+
++++++++++++++++border:+none;+
++++++++++++++++margin:0;+
++++++++++++++++padding:0;+
++++++++++++++++overflow:+hidden;+
++++++++++++++++z-index:999999;+
++++++++++++++++height:+100%25;
++++++++++++++++}

++++++++++++++++.orthi-textlightbox-area+{
++++++++++++++++background-color:+#fff;
++++++++++++++++position:+absolute;
++++++++++++++++width:+50%25;
++++++++++++++++left:+300px;
++++++++++++++++top:+200px;
++++++++++++++++padding:+20px+10px;
++++++++++++++++border-radius:+6px;
++++++++++++++++}
++++++++++++++++.orthi-textlightbox-area-close{
++++++++++++++++font-weight:+bold;
++++++++++++++++background-color:black;
++++++++++++++++color:+white;
++++++++++++++++border-radius:+50%25;
++++++++++++++++padding:+10px;
++++++++++++++++float:+right;
++++++++++++++++border:+1px+solid+black;
++++++++++++++++box-shadow:+0+0+10px+0+rgba(33,+157,+216,+0.82);
++++++++++++++++margin-top:-30px;
++++++++++++++++margin-right:-30px;
++++++++++++++++cursor:pointer;
++++++++++++++++}
</style>
<button+onclick="privacypolicy()">Show+Content</button>
<div+id="privacypolicy"+class="orthi-textlightbox-background"+style="display:none;">
<div+class="orthi-textlightbox-area">
LOL<button+class="orthi-textlightbox-area-close"+onclick="hideprivacypolicy()">×</button>
</div>
</div>|code-block|syntax|javascript|603814|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I Think It Is Best!</p>

<p>And Use The Simple JS to make this work.</p>

<pre><code>&lt;script&gt;
function privacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: inline;');
    privacypolicy1.style= privacypolicy2;
}
function hideprivacypolicy(){
    var privacypolicy1 = document.getElementById('privacypolicy');
    var privacypolicy2 = ('display: none;');
    privacypolicy1.style= privacypolicy2;
}
&lt;/script&gt;
&lt;style type="text/css"&gt;
            .orthi-textlightbox-background{
                background-color: rgba(30, 23, 23, 0.82);
                font-family: siyam rupali; 
                position: fixed; top:0px; 
                bottom:0px; 
                right:0px; 
                width: 100%; 
                border: none; 
                margin:0; 
                padding:0; 
                overflow: hidden; 
                z-index:999999; 
                height: 100%;
                }

                .orthi-textlightbox-area {
                background-color: #fff;
                position: absolute;
                width: 50%;
                left: 300px;
                top: 200px;
                padding: 20px 10px;
                border-radius: 6px;
                }
                .orthi-textlightbox-area-close{
                font-weight: bold;
                background-color:black;
                color: white;
                border-radius: 50%;
                padding: 10px;
                float: right;
                border: 1px solid black;
                box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
                margin-top:-30px;
                margin-right:-30px;
                cursor:pointer;
                }
&lt;/style&gt;
&lt;button onclick="privacypolicy()"&gt;Show Content&lt;/button&gt;
&lt;div id="privacypolicy" class="orthi-textlightbox-background" style="display:none;"&gt;
&lt;div class="orthi-textlightbox-area"&gt;
LOL&lt;button class="orthi-textlightbox-area-close" onclick="hideprivacypolicy()"&gt;×&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>


<h2><a href="http://jsfiddle.net/adzFe/" rel="noreferrer">JSFiddle</a></h2>

<p>Is there any way to make something like the X on that link with pure css?</p>

<p><img src="https://i.stack.imgur.com/AY8ka.png" alt="enter image description here"></p>


Pure css close button

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有办法用纯css在这个链接上做一些类似X的东西？​​

问纯css关闭按钮
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯css关闭按钮EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯css关闭按钮
EN