JSFiddle
有没有办法用纯css在那个链接上制作像X这样的东西？
问问题
174381 次
11 回答
139
我花在这上面的时间比我应该做的要多，并且由于明显的原因没有在 IE 中进行测试。话虽如此，它几乎是相同的。
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: "×";
}
于 2012-04-04T22:10:30.940 回答
42
我尝试关闭图标，没有文字
.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>于 2013-11-22T07:56:23.550 回答
10
尝试实现在所有浏览器中看起来一致的东西并使用可以用 css 设置样式的 svg 按钮时，我感到很沮丧。
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;
}
于 2015-04-10T13:54:45.933 回答
9
基本思路：对于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”。
又快又脏，但有效。
于 2012-04-04T21:57:45.933 回答
6
嗨，您可以在纯 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>
于 2012-04-05T06:25:31.280 回答
5
编辑：更新了 css 以匹配你所拥有的..
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;
}
于 2012-04-04T21:58:52.177 回答
2
这里令人失望的是“X”不是透明的（至少我可能会这样创建PNG）。
我整理了这个快速测试。 http://jsfiddle.net/UM3a2/22/embedded/result/它允许您在使负空间透明的同时为正空间着色。由于它完全由边框组成，因此很容易着色，因为边框颜色默认为文本颜色。
它不完全支持 IE 8 及更早版本（边框半径问题），但它可以很好地降级为正方形（如果您可以使用方形关闭按钮）。
它还需要两个 HTML 元素，因为每个选择器只允许两个伪元素。我不知道我是从哪里学到的，但我认为这是在 Chris Coyier 的一篇文章中。
<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%;
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;
}
于 2013-04-25T23:25:16.817 回答
2
您可以在http://www.cssbuttongenerator.com/上创建close（或任何）按钮。它为您提供按钮的纯 css 值。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 */
于 2014-01-17T11:56:54.693 回答
1
只是一个想法-如果您不针对 IE7，则可以摆脱任何经过 base64 编码并嵌入到 css 中的图像。我假设您的目标是避免不必要的 http 请求，而不是实际将 css 按钮作为自己的目标。
于 2012-04-05T07:21:56.063 回答
0
如果你想要纯 css，没有字母“x”....
这里有一些很棒的实验图标，其中包括一个用 CSS 制作的圆圈中的“x”：http: //nicolasgallagher.com/pure-css-gui-icons/demo/
于 2012-04-05T00:11:22.117 回答
0
我认为这是最好的！
并使用简单的 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>
于 2016-07-02T08:34:49.660 回答