纯CSSclosuresbutton
的jsfiddle
有没有什么办法让纯XSS链接上的X？
我花了更多的时间在这个比我应该有，并没有在IE中testing的显而易见的原因。 这就是说，这几乎是相同的。
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: "×"; } 我试图closures图标，没有文字
.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; }
<a href="#" class="close-icon"></a>
基本思路：对于a.boxclose：
border-radius: 40px; width:20px; height 10px; background-color: #c0c0c0; border: 1px solid black; color: white; padding-left: 10px; padding-top: 4px;
添加一个“X”到closures框的内容。
快速和肮脏，但工程。
我感到沮丧试图实现一些在所有浏览器中看起来一致的东西，并与一个可以使用CSS样式的svgbutton。
HTML
<svg> <circle cx="12" cy="12" r="11" stroke="black" stroke-width="2" fill="white" /> <path stroke="black" stroke-width="4" fill="none" d="M6.25,6.25,17.75,17.75" /> <path stroke="black" stroke-width="4" fill="none" d="M6.25,17.75,17.75,6.25" /> </svg>
CSS
svg { cursor: pointer; height: 24px; width: 24px; } svg > circle { stroke: black; fill: white; } svg > path { stroke: black; } svg:hover > circle { fill: red; } svg:hover > path { stroke: white; }
嗨，你可以在纯CSS使用此代码
像这样
CSS
.arrow { cursor: pointer; color: white; border: 1px solid #AEAEAE; border-radius: 30px; background: #605F61; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; } .arrow:before{ content: "×"; }
HTML
<a href="#" class="arrow"> </a>
编辑：更新CSS来匹配你所拥有的..
DEMO
HTML
<div> <span class="close-btn"><a href="#">X</a></span> </div>
CSS
.close-btn { border: 2px solid #c2c2c2; position: relative; padding: 1px 5px; top: -20px; background-color: #605F61; left: 198px; border-radius: 20px; } .close-btn a { font-size: 15px; font-weight: bold; color: white; text-decoration: none; }
令人失望的是，“X”不透明（至less我可能会创build一个PNG）。
我把这个快速testing放在一起。 http://jsfiddle.net/UM3a2/22/embedded/result/它允许你为正面空间着色，同时保持透明的负空间。; 由于它完全由边框构成，所以很容易上色，因为边框颜色默认为文本颜色。
它并不完全支持IE 8和更早的版本（边界半径问题），但是它会相当好地降低到正方形（如果你用方形的closuresbutton可以的话）。
它还需要两个HTML元素，因为每个select器只允许两个伪元素。 我不知道我在哪里学到了这些，但我认为这是在克里斯·科伊尔的一篇文章中。
<div id="close" class="arrow-tb"> Close <div class="arrow-lr"> </div> </div> #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-tb:after, .arrow-tb:before, .arrow-lr:after, .arrow-lr:before { border-color: transparent; border-style: solid; border-width: 4px; content: ""; left: 2px; top: 0px; position: absolute; } .arrow-tb:after { border-top-color: inherit; } .arrow-lr:after { border-right-color: inherit; left: 4px; top: 2px; } .arrow-tb:before { border-bottom-color: inherit; bottom: 0; } .arrow-lr:before { border-left-color: inherit; left: 0; top: 2px; }
您可以在http://www.cssbuttongenerator.com/上创buildclose （或任何）button。 它给你的纯CSSbutton的值。
HTML
<span class="classname hightlightTxt">x</span>
CSS
<style type="text/css"> .hightlightTxt { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; } .classname { -moz-box-shadow:inset 0px 3px 24px -1px #fce2c1; -webkit-box-shadow:inset 0px 3px 24px -1px #fce2c1; box-shadow:inset 0px 3px 24px -1px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; border-top-left-radius:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-topright:20px; border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; border-bottom-right-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; border-bottom-left-radius:20px; text-indent:0px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:Arial; font-size:28px; font-weight:bold; font-style:normal; height:32px; line-height:32px; width:32px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #cc9f52; } .classname:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }.classname:active { position:relative; top:1px; }</style> /* This button was generated using CSSButtonGenerator.com */
如果你想要纯CSS，没有字母“x”….
这里有一些令人敬畏的实验性的图标，其中包括一个用CSS制作的圆圈“x”： http ： //nicolas.gallagher.com/pure-css-gui-icons/demo/
只是一个想法 – 如果你不是针对IE7，你可以摆脱任何形象为base64编码和embedded到CSS 。 我假设你的目标是避免一个不必要的http请求，而不是实际制作一个cssbutton作为自己的目标。
我认为这是最好的！
并使用简单的JS来做到这一点。
<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%; 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; } </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>
