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

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

问纯css关闭按钮
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯css关闭按钮EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯css关闭按钮
EN